/* ============================================================
   USA TALENT SHOW — Stylesheet
   Sub-site within SOVA Entertainment. Inherits the black + gold
   design language (deep aubergine #0a0809 + gold #cda45f).
   BEM · CSS variables · responsive desktop / tablet / mobile
   ============================================================ */

/* ----------  Tokens (inherited 1:1 from public.css)  ---------- */
.ts {
  --c-eggplant:        #0a0809;
  --c-eggplant-deep:   #050405;
  --c-eggplant-soft:   #151110;
  --c-eggplant-card:   #1c1714;
  --c-blush:           #cda45f;
  --c-blush-light:     #e7cf99;
  --c-rose:            #c9a36a;
  --c-rose-deep:       #a8854a;
  --c-cream:           #f4ecdf;
  --c-text:            #efe7da;
  --c-muted:           rgba(239, 231, 218, 0.55);
  --c-faint:           rgba(239, 231, 218, 0.30);
  --c-line:            rgba(205, 164, 95, 0.16);
  --c-line-strong:     rgba(205, 164, 95, 0.34);
  --c-gold:            #cda45f;

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Manrope", system-ui, -apple-system, sans-serif;

  --maxw: 1480px;
  --gut: clamp(1.25rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 22px;
  --block-pad: 80px;
  --header-h: 80px;   /* live header height — talent-show.js keeps it in sync (sticky/fixed offsets) */
  /* The hero is laid out against the mockup's 80px bar, not the live header:
     the shared header is taller (and fluid), and tracking it shifted the whole
     hero composition down vs. the design. The header just overlaps more of
     the hero's empty top padding instead. */
  --ts-hero-offset: 80px;

  /* ----------  Semantic layer (dark theme = the default look)  ----------
     Components reference ONLY these. The light theme below re-declares the
     same names, so no component rule needs to know which theme is active. */
  --c-bg:            var(--c-eggplant);        /* page */
  --c-bg-deep:       var(--c-eggplant-deep);   /* canvas + mobile overlay */
  --c-surface:       var(--c-eggplant-soft);   /* image placeholders */
  --c-surface-2:     var(--c-eggplant-card);   /* popovers: lang menu, datepicker */
  --c-panel:         rgba(20, 16, 14, 0.4);    /* cards */
  --c-panel-2:       rgba(20, 16, 14, 0.5);    /* raised cards, countdown, cart */
  --c-panel-soft:    rgba(20, 16, 14, 0.3);    /* partner tiles */
  --c-panel-hover:   rgba(28, 23, 20, 0.55);
  --c-field:         rgba(20, 16, 14, 0.55);   /* inputs */
  --c-field-focus:   rgba(28, 23, 20, 0.7);
  --c-bar:           rgba(6, 5, 7, 0.82);      /* sticky sub-nav */
  --c-bar-header:    rgba(6, 5, 7, 0.72);      /* scrolled header */
  --c-track:         rgba(255, 255, 255, 0.05);/* progress track */
  --c-shadow:        rgba(0, 0, 0, 0.65);

  /* gold has two jobs: ink (text/icons) and fill (badges, buttons, active states).
     Ink must darken on a light page; fill stays bright gold in both themes. */
  --c-accent-fill:   var(--c-blush);
  --c-on-accent:     #0a0809;                  /* text that sits ON the gold fill */
  --c-gold-wash:     rgba(205, 164, 95, 0.06);
  --c-gold-wash-2:   rgba(205, 164, 95, 0.08);
  --c-gold-wash-3:   rgba(205, 164, 95, 0.14);

  /* text over photo scrims — always light, in both themes */
  --c-on-media:      #f4ecdf;
  --c-on-media-soft: rgba(244, 236, 223, 0.72);

  --c-error:         #e05a5a;
  --c-error-soft:    #e88;

  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME — warm ivory, not paper white. Same gold identity,
   darkened to bronze wherever gold is used as ink.
   ============================================================ */
.ts[data-theme="light"] {
  --c-bg:            #f5efe4;
  --c-bg:            #f2f1ef;
  --c-bg-deep:       #eee6d8;
  --c-surface:       #ebe3d4;
  --c-surface-2:     #fdfaf4;
  --c-panel:         rgba(255, 253, 248, 0.66);
  --c-panel-2:       rgba(255, 253, 248, 0.88);
  --c-panel-soft:    rgba(255, 253, 248, 0.5);
  --c-panel-hover:   #fffdf8;
  --c-field:         rgba(255, 253, 248, 0.9);
  --c-field-focus:   #fffdf8;
  /* --c-bar:           rgba(245, 239, 228, 0.86); */
  --c-bar:           rgb(242 237 230 / 86%);
  --c-bar-header:    rgba(245, 239, 228, 0.78);
  --c-track:         rgba(36, 28, 18, 0.08);
  --c-shadow:        rgba(74, 55, 25, 0.18);

  --c-text:          #241c12;
  --c-muted:         rgba(36, 28, 18, 0.64);
  --c-faint:         rgba(36, 28, 18, 0.42);
  --c-line:          rgba(122, 92, 40, 0.20);
  --c-line-strong:   rgba(122, 92, 40, 0.38);

  --c-blush:         #8a6320;   /* gold as ink — readable on ivory */
  --c-blush-light:   #a87c2e;
  --c-accent-fill:   #cda45f;   /* gold as fill — unchanged */

  --c-gold-wash:     rgba(138, 99, 32, 0.07);
  --c-gold-wash-2:   rgba(138, 99, 32, 0.10);
  --c-gold-wash-3:   rgba(138, 99, 32, 0.16);

  --c-error:         #c0392b;
  --c-error-soft:    #a8342a;

  color-scheme: light;
}

/* Light theme: the vars above only reach .ts (the shared header/footer stay on
   the site's one look), so the page ground for this section comes from the
   wrapper itself — without it only the cards turned light on a dark page. */
.ts { color: var(--c-text); }
.ts[data-theme="light"] { background: var(--c-bg); }
/* flow-root: on pages without a hero the sub-nav's header-height top margin
   would otherwise collapse out of .ts, leaving the strip under the transparent
   header on the dark html ground in the light theme */
.ts { display: flow-root; }

/* ----------  Base  ---------- */
html { background: var(--c-bg-deep, #050405); overflow-x: clip; }

/* slim gold page scrollbar (same as main site) */
html { scrollbar-width: thin; scrollbar-color: #cda45f transparent; }
.ts ::-webkit-scrollbar { width: 7px; height: 7px; }
.ts ::-webkit-scrollbar-track { background: transparent; }
.ts ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-blush), var(--c-blush-light)); border-radius: 999px; }
.ts ::-webkit-scrollbar-thumb:hover { background: var(--c-blush); }

body {
  font-family: var(--ff-body);
  /* flow-root: keeps the first child's top margin inside the body box, so the
     body background covers the top strip too (no lighter band under the header) */
  display: flow-root;
  background: var(--c-bg, #0a0809);
  color: var(--c-text);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x: clip;
  accent-color: var(--c-blush);   /* gold accent in native controls (date picker, etc.) */
}

/* deep, dimensional backdrop — luminous aubergine with gold bloom (site-wide) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(52% 44% at 50% 18%, rgba(231, 207, 153, 0.32), transparent 58%),
    radial-gradient(72% 62% at 92% 0%, rgba(216, 172, 112, 0.36), transparent 55%),
    radial-gradient(70% 60% at 4% 100%, rgba(216, 172, 112, 0.36), transparent 55%),
    radial-gradient(60% 52% at 24% 38%, rgba(180, 145, 85, 0.22), transparent 56%),
    linear-gradient(156deg, #141011 0%, #0a0809 50%, #050405 100%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: -35%;
  z-index: -2;
  background:
    radial-gradient(30% 30% at 36% 32%, rgba(216, 172, 112, 0.34), transparent 64%),
    radial-gradient(28% 28% at 70% 70%, rgba(231, 207, 153, 0.26), transparent 68%);
  filter: blur(80px);
  opacity: 1;
  animation: ambientDrift 28s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ambientDrift {
  0%   { transform: translate(-12%, -8%) scale(1) rotate(0deg); }
  100% { transform: translate(14%, 12%) scale(1.22) rotate(8deg); }
}

body.is-locked { overflow: hidden; height: 100vh; }

/* ----------  Utilities  ---------- */
/* .u-container — owned by public.css (identical rule); not redefined here so
   its cascade — including any future responsive tweaks — isn't shadowed by
   this stylesheet loading after it. */

.ts .u-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-blush);
}
.ts .u-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-blush);
  opacity: 0.7;
}

.ts .u-display {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.12; /* 0.92 glued two-line titles together, and the clip of each split line (.r-line) cut off Ukrainian Й / Ї marks */
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.ts .u-lead {
  color: var(--c-muted);
  line-height: 1.75;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  max-width: 62ch;
}

/* reveal helpers used by JS */
.ts .r-line { overflow: hidden; }

/* ============================================================
   HEADER / NAV — owned by the SITE-WIDE header/footer components
   (resources/views/components/public/layout/*). .header/.nav/.header__actions
   come from public.css; the only thing here is the light theme for them.
   ============================================================ */

/* Light theme for the shared header. The header sits outside .ts, so the
   theme is mirrored onto <html> as data-ts-theme (theme-boot + initTheme()).
   Its bar is transparent until scrolled, so over the ivory page its ink has to
   go dark — re-declaring the palette on .header recolours the nav links, the
   language chip, the login icon and the burger in one go. */
html[data-ts-theme="light"] .header {
  --c-text:        #241c12;
  --c-muted:       rgba(36, 28, 18, 0.64);
  --c-line:        rgba(122, 92, 40, 0.20);
  --c-line-strong: rgba(122, 92, 40, 0.38);
  --c-blush:       #8a6320;   /* gold as ink — readable on ivory */
}
/* the CTA is a gold fill, not ink — it keeps the bright gold */
html[data-ts-theme="light"] .header .btn { --bg: #cda45f; }
html[data-ts-theme="light"] .header.is-scrolled { background: rgba(245, 239, 228, 0.78); }
html[data-ts-theme="light"] .header .lang__menu {
  background: #fdfaf4;
  box-shadow: 0 22px 50px -20px rgba(74, 55, 25, 0.25);
}
/* With the mobile menu open the header sits over the dark overlay, so it goes
   back to the dark-theme palette until the menu closes. */
html[data-ts-theme="light"] .header:has(.burger.is-open) {
  --c-text:        #efe7da;
  --c-muted:       rgba(239, 231, 218, 0.55);
  --c-line:        rgba(205, 164, 95, 0.16);
  --c-line-strong: rgba(205, 164, 95, 0.34);
  --c-blush:       #cda45f;
}
html[data-ts-theme="light"] .header.is-scrolled:has(.burger.is-open) { background: rgba(6, 5, 7, 0.72); }

/* ----------  Mobile overlay menu, section variant  ----------
   Lives outside .ts (components/public/layout/mobile-menu), so the rules are
   scoped by its own modifier. Nine items instead of six: a smaller type step,
   top-aligned, and the overlay scrolls on short phones rather than clipping. */
.menu-overlay--ts {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-overlay--ts .menu-overlay__list { gap: clamp(0.35rem, 1.4vh, 0.9rem); }
.menu-overlay--ts .menu-overlay__link { font-size: clamp(1.7rem, 7.6vw, 3.2rem); }
.menu-overlay--ts .menu-overlay__index { font-size: clamp(0.9rem, 2.6vw, 1.2rem); }
.menu-overlay__back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75em 1.25em;
  border: 1px solid rgba(205, 164, 95, 0.34);
  border-radius: 100px;
  background: rgba(205, 164, 95, 0.08);
  color: #cda45f;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.menu-overlay__back:hover { background: #cda45f; color: #0a0809; }
.menu-overlay__back svg { transition: transform .35s var(--ease); }
.menu-overlay__back:hover svg { transform: translateX(-3px); }
.menu-overlay__eyebrow {
  margin: clamp(1.4rem, 3.5vh, 2.2rem) 0 clamp(0.8rem, 2vh, 1.2rem);
  color: rgba(239, 231, 218, 0.55);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}

/* ----------  Sticky sub-navigation (the show's page menu, AGT-style)  ---------- */
.ts .subnav {
  /* plain block in the flow — it scrolls away with the page. The floating copy
     below takes over at the top, which keeps sticky out of the picture entirely. */
  position: relative;
  z-index: 500;
  background: var(--c-bar);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
/* on pages without a hero the sub-nav is the first thing under the fixed header */
.ts .subnav--top { margin-top: var(--header-h); }

/* the floating copy: parked above the viewport, slides down once the bar in the
   page has scrolled past. Same timing as the header, so they swap as one move. */
.ts .subnav--float {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  margin-top: 0;
  z-index: 590;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
  visibility: hidden;
}
.ts .subnav--float.is-shown { transform: translateY(0); visibility: visible; }
/* header came back while the floating bar is out — it steps down under it,
   both moving on the same transform transition, so they read as one block */
.ts .subnav--float.is-shown.is-under { transform: translateY(var(--header-h)); }
@media (prefers-reduced-motion: reduce) { .ts .subnav--float { transition: none; } }
.ts .subnav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 54px;
}
.ts .subnav__list {
  display: flex; align-items: stretch; gap: clamp(1.1rem, 2.6vw, 2.6rem);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ts .subnav__list::-webkit-scrollbar { display: none; }
.ts .subnav__link {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 1.05rem 0;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-muted); white-space: nowrap;
  transition: color .3s var(--ease);
}
.ts .subnav__link:hover { color: var(--c-text); }
.ts .subnav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-blush); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.ts .subnav__link:hover::after { transform: scaleX(1); }
.ts .subnav__link.is-active { color: var(--c-blush); }
.ts .subnav__link.is-active::after { transform: scaleX(1); }
/* Registration: first in the list and a filled pill, so it reads as the
   section's call to action rather than one more tab. */
.ts .subnav__link--cta {
  align-self: center;
  padding: 0.55rem 1.15rem;
  border-radius: 100px;
  background: var(--c-accent-fill);
  color: var(--c-on-accent);
  transition: filter .3s var(--ease), box-shadow .3s var(--ease);
}
.ts .subnav__link--cta::after { display: none; }
/* a "live" dot: registration is open */
.ts .subnav__link--cta::before {
  content: ""; flex-shrink: 0;
  width: 10px; height: 10px; margin-right: 0.6rem; border-radius: 50%;
  background: #1fd65f;
  border: 1.5px solid rgba(10, 8, 9, 0.55);   /* reads against the gold fill */
  box-sizing: border-box;
  box-shadow: 0 0 0 0 rgba(31, 214, 95, 0.7);
  animation: ts-live-dot 1.6s ease-out infinite;
}
@keyframes ts-live-dot {
  0%   { opacity: 1;   box-shadow: 0 0 0 0 rgba(31, 214, 95, 0.7); }
  50%  { opacity: 0.45; }
  70%  { box-shadow: 0 0 0 7px rgba(31, 214, 95, 0); }
  100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(31, 214, 95, 0); }
}
@media (prefers-reduced-motion: reduce) { .ts .subnav__link--cta::before { animation: none; } }
.ts .subnav__link--cta:hover,
.ts .subnav__link--cta.is-active { color: var(--c-on-accent); filter: brightness(1.08); }
.ts .subnav__link--cta.is-active { box-shadow: 0 0 0 2px var(--c-bar), 0 0 0 3px var(--c-accent-fill); }
.ts .subnav__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-blush);
  transition: gap .3s var(--ease);
}
.ts .subnav__cta:hover { gap: 0.8rem; }
@media (max-width: 640px) { .ts .subnav__cta { display: none; } }

/* back-to-main-site pill */
.ts .backsite {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  padding: 0.45em 0.85em;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .backsite:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }
.ts .backsite svg { transition: transform .35s var(--ease); }
.ts .backsite:hover svg { transform: translateX(-3px); }

/* language dropdown — owned by the site-wide header (public.css); the
   real switcher offers en/ru/uk, not the EN/UA stub this mockup had. */

/* ----------  Theme toggle (dark <-> light)  ---------- */
.themetoggle {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-blush); border: 1px solid var(--c-line-strong); background: transparent;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.themetoggle:hover { border-color: var(--c-blush); background: var(--c-gold-wash, rgba(205, 164, 95, 0.06)); }
.themetoggle:focus-visible { outline: 2px solid var(--c-blush); outline-offset: 3px; }
.themetoggle svg { position: absolute; transition: opacity .35s var(--ease), transform .5s var(--ease); }
/* each icon shows the theme you get by clicking */
.themetoggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
.themetoggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.themetoggle[aria-pressed="true"] .themetoggle__sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
.themetoggle[aria-pressed="true"] .themetoggle__moon { opacity: 1; transform: rotate(0) scale(1); }

/* one short cross-fade while the palette swaps, then out of the way again */
.ts.theme-switching, .ts.theme-switching * {
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), fill .35s var(--ease) !important;
}

/* ----------  Button  ---------- */
/* Scoped to .ts (the section's content wrapper), never bare .btn: a bare rule
   here would also restyle the shared header's buttons and, loading after
   public.css, beat its responsive overrides by source order (it hid nothing
   at ≤580px and pushed the burger off-screen). Scoped, it also wins over the
   CRM .btn family bundled into the same app.css (height:42/48px,
   justify-content:center), which otherwise leaks into these buttons. */
.ts .btn {
  --bg: var(--c-accent-fill);
  --fg: var(--c-on-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: normal; gap: 0.6em;
  height: auto; min-width: 0; width: auto; margin-left: 0; white-space: normal;
  padding: 0.95em 1.7em; border-radius: 100px; border: 0;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none;
  color: var(--fg); background: var(--bg);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 6px 24px -6px rgba(205, 164, 95, 0.45), 0 0 0 0 rgba(205, 164, 95, 0.3);
  transition: color .45s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease);
}
.ts .btn:hover { box-shadow: 0 10px 34px -6px rgba(205, 164, 95, 0.6), 0 0 28px -2px rgba(205, 164, 95, 0.45); }
.ts .btn:active { transform: scale(0.97); }
.ts .btn::before {
  content: ""; position: absolute; inset: 0;
  background: var(--c-blush-light); transform: translateY(101%);
  border-radius: 50% 50% 0 0; transition: transform .55s var(--ease); z-index: -1;
}
.ts .btn:hover::before { transform: translateY(0); border-radius: 0; }
.ts .btn__icon { transition: transform .45s var(--ease); }
.ts .btn:hover .btn__icon { transform: translate(3px, -3px); }
.ts .btn--ghost {
  --fg: var(--c-text);
  background: var(--c-gold-wash-2);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 6px 22px -10px var(--c-shadow);
}
.ts .btn--ghost::before { background: var(--c-accent-fill); }
.ts .btn--ghost:hover { color: var(--c-on-accent); box-shadow: 0 10px 30px -8px rgba(205, 164, 95, 0.5), 0 0 24px -4px rgba(205, 164, 95, 0.35); }
.ts .btn--lg { height: auto; padding: 1.15em 2.1em; font-size: 0.9rem; }
.ts .btn--block { width: 100%; justify-content: center; }

/* public.css pads every split line (.r-line) for its own clip effect, which
   made every [data-split] heading here a few px taller than the design. */
.ts .r-line, .ts .hero__title .r-line { overflow: hidden; padding-bottom: 0; }

/* burger + mobile overlay menu — owned by the site-wide header/mobile-menu
   components (public.css). */

/* ============================================================
   PLACEHOLDERS (no external images — CSS placeholders)
   ============================================================ */
.ts .ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(205, 164, 95, 0.12), transparent 60%),
    var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-faint);
  overflow: hidden;
}
.ts .ph::after {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-faint);
}
.ts .ph__mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.6rem);
  color: var(--c-gold-wash-3); letter-spacing: 0.04em; pointer-events: none;
}
.ts .ph--portrait { aspect-ratio: 3 / 4; border-radius: var(--radius); }
.ts .ph--square   { aspect-ratio: 1 / 1;  border-radius: var(--radius); }
.ts .ph--video    { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.ts .ph--stage    { border-radius: var(--radius); }
.ts .ph--wide     { aspect-ratio: 4 / 3;  border-radius: var(--radius); }

/* ============================================================
   PAGE HEADER (for pages WITHOUT hero)
   ============================================================ */
.ts .pagehead { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(1rem, 2vw, 1.6rem); }
.ts .pagehead__inner { display: flex; flex-direction: column; gap: 1.2rem; }
.ts .pagehead__title { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.ts .pagehead__lead { color: var(--c-muted); line-height: 1.75; font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 900px; }

/* breadcrumbs */
/* crm.css .crumbs / .crumbs a (breadcrumbs of the CRM) leak display:flex, 13px text,
   grey colour and weight 500 here — back to the mockup's defaults. */
:where(.ts) .crumbs { display: block; align-items: normal; gap: normal; flex-wrap: nowrap; font-size: inherit; line-height: inherit; color: inherit; }
:where(.ts) .crumbs a { font-weight: inherit; }
.ts .crumbs { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.ts .crumbs__list { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ts .crumbs__item { font-size: clamp(0.62rem, 0.78vw, 0.72rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.ts .crumbs__item + .crumbs__item::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--c-line-strong); margin-right: 0.7rem; vertical-align: middle; }
.ts .crumbs__link { color: var(--c-muted); transition: color 0.35s var(--ease); }
.ts .crumbs__link:hover { color: var(--c-blush); }
.ts .crumbs__item[aria-current="page"] { color: var(--c-blush); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   HERO (About page only)
   ============================================================ */
.ts .hero {
  /* public.css also defines a bare .hero (its own homepage hero) with
     display:flex, align-items:flex-end and min-height:100svh — reset
     those explicitly, or they leak in here and .hero__grid's own sizing
     (a grid child stretched by that flex parent) comes out taller and
     bottom-anchored instead of the calc() below driving the height. */
  display: block;
  align-items: unset;
  min-height: 0;
  position: relative;
  padding-top: calc(var(--ts-hero-offset) + clamp(1.5rem, 5vh, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  overflow: hidden;
}
.ts .hero__grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: calc(84svh - var(--ts-hero-offset));
}
.ts .hero__content { position: relative; z-index: 2; max-width: none; align-self: center; }
.ts .hero__brand { display: block; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1rem, 1.8vw, 1.6rem); color: var(--c-blush); margin-bottom: 0.6rem; }
/* hero countdown: small phase label on top, big timer below */
.ts .herotimer { margin-top: 1.8rem; }
.ts .herotimer__label { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-blush); font-weight: 700; margin-bottom: 0.7rem; }
.ts .herotimer__clock { display: flex; gap: clamp(0.7rem, 1.6vw, 1.4rem); }
.ts .herotimer__unit { display: flex; flex-direction: column; align-items: center; min-width: 2.6em; }
.ts .herotimer__unit b { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.ts .herotimer__unit span { margin-top: 0.35rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.ts .herotimer__sep { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--c-line-strong); align-self: flex-start; }

/* application dates + compact countdown (intro block) */
.ts .applydates { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.ts .applydates__row { display: flex; flex-direction: column; gap: 0.1rem; }
.ts .applydates__k { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); font-weight: 700; }
.ts .applydates__v { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.05; color: var(--c-text); }
.ts .applydates__row--accent .applydates__v { color: var(--c-blush); }
.ts .herotimer--compact .herotimer__unit b { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
/* About experience: alternating photo/content rows */
.ts .aboutexp { display: grid; gap: clamp(2rem, 4.5vw, 3.6rem); }
.ts .aboutexp .jfeature__text .herotimer { margin-top: 0.7rem; }
.ts .aboutexp__cta { margin-top: 1.4rem; }
/* bigger dates + timer in the about registration row */
.ts .aboutexp .applydates__v { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.ts .aboutexp .herotimer--compact .herotimer__unit b { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.ts .aboutexp .herotimer__sep { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ts .aboutexp .herotimer__clock { gap: clamp(0.8rem, 2vw, 1.6rem); }
.ts .aboutexp .herotimer__unit span { font-size: 0.72rem; }
/* timer card sitting in a feature media slot (no image) */
.ts .aboutexp__timer.jfeature__media { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 2.6rem); background: var(--c-panel); }
.ts .aboutexp__timer .applydates { margin-bottom: 0.4rem; }
.ts .aboutexp__timer .herotimer { margin-top: 0.4rem; }
.ts .hero__eyebrow { margin-bottom: 1.4rem; }
.ts .hero__title { font-size: clamp(1.8rem, 3.6vw, 3.4rem); max-width: 16ch; margin-bottom: 0; }
.ts .hero__title em { font-style: normal; color: var(--c-blush); }
.ts .hero__title em span {
  color:#efe7da;
  /* font-size: 44px; */
}
.ts .hero__sub { margin-top: 1.6rem; margin-bottom: 0; color: var(--c-muted); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.65; max-width: 48ch; }
.ts .hero__cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.ts .hero__figure { position: relative; align-self: center; }
.ts .hero__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  object-position: bottom center;
  /* soft transition into the block background at the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

@media (max-width: 900px) {
  .ts .hero__grid { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .ts .hero__figure { order: -1; }
  .ts .hero__photo { max-height: 42vh; margin-inline: auto; }
  .ts .hero__title { font-size: clamp(2.2rem, 8vw, 3.4rem); max-width: 18ch; }
}

/* ============================================================
   SECTION scaffolding
   ============================================================ */
/* public.css's own bare .section carries a site-wide frosted-glass
   background/blur, and .section__head/.section__title carry ITS
   two-column grid header (align-items:end, title max-width:14ch) —
   both bleed into these same-named rules here unless reset. */
.ts .section { position: static; padding: clamp(2.5rem, 5vw, 4.25rem) 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ts .section--tight { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.ts .section__head { display: flex; flex-direction: column; align-items: normal; grid-template-columns: none; gap: 0.85rem; margin-bottom: clamp(1.3rem, 2.4vw, 2rem); }
.ts .section__lead, .ts .section__head p { max-width: 68ch; }
.ts .section__head--between { max-width: none; }
.ts .section__title { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: none; }
.ts .section__lead { color: var(--c-muted); line-height: 1.75; font-size: clamp(1rem, 1.15vw, 1.12rem); }
.ts .section__topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

/* full-width editorial copy (About intro) */
.ts .about-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3.5vw, 3.4rem); }
.ts .about-copy p { color: var(--c-muted); line-height: 1.85; font-size: clamp(1.02rem, 1.2vw, 1.18rem); }
.ts .about-copy p:first-child { color: var(--c-text); }
@media (max-width: 760px) { .ts .about-copy { grid-template-columns: 1fr; gap: 1.2rem; } }

/* intro: About text (left) + countdown (right) in one block */
/* public.css's own .intro (a different homepage block) sets `padding: X 0`,
   which also zeroes the side padding this element needs as .u-container —
   so restate both axes. */
.ts .intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: 0 var(--gut); }
.ts .intro__text { display: flex; flex-direction: column; gap: 1.2rem; }
.ts .intro__text .u-eyebrow { margin-bottom: 0.2rem; }
.ts .intro__text .section__title { font-size: clamp(1.75rem, 3.1vw, 2.7rem); margin-bottom: 0.4rem; }
.ts .intro__text p { color: var(--c-muted); line-height: 1.85; font-size: clamp(1.02rem, 1.2vw, 1.15rem); }
.ts .intro__text p:first-of-type { color: var(--c-text); }
.ts .intro__side { display: flex; flex-direction: column; gap: 1.1rem; }
.ts .intro__side .countdown { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 460px; gap: clamp(0.7rem, 1.4vw, 1.1rem); }
.ts .intro__side .countdown__cell { padding: clamp(1.1rem, 2.4vw, 1.9rem) 0.5rem; }
.ts .intro__side .countdown__num { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.ts .intro__side .countdown__label { margin-top: 0.5rem; font-size: 0.64rem; }
.ts .intro__cta { margin-top: 1.4rem; align-self: stretch; width: 100%; max-width: 460px; justify-content: center; }
@media (max-width: 900px) {
  .ts .intro { grid-template-columns: 1fr; gap: 2rem; }
  .ts .intro__side .countdown { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) { .ts .intro__side .countdown { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.ts .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 1.5vw, 1.2rem); max-width: 640px; }
.ts .countdown__cell {
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: var(--c-panel-2); padding: clamp(1rem, 2.4vw, 1.8rem) 0.5rem; text-align: center;
}
.ts .countdown__num { font-family: var(--ff-display); font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.6rem); color: var(--c-blush); line-height: 1; font-variant-numeric: tabular-nums; }
.ts .countdown__label { margin-top: 0.6rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.ts .countdown__note { margin-top: 1.2rem; font-size: 0.82rem; color: var(--c-faint); }

/* ============================================================
   CATEGORIES
   ============================================================ */
.ts .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
.ts #categories .section__head { margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }
.ts #jury .section__head { margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }
.ts .cat {
  --cat-pad: clamp(1.5rem, 3vw, 2.2rem);
  position: relative; border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel); padding: var(--cat-pad);
  overflow: hidden; transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.ts .cat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 100% 0%, var(--c-gold-wash-3), transparent 60%); opacity: 0; transition: opacity .5s var(--ease); }
.ts .cat:hover { transform: translateY(-4px); border-color: var(--c-line-strong); background: var(--c-panel-hover); }
.ts .cat:hover::before { opacity: 1; }
/* category photo: bleeds to the card's edges above the text */
.ts .cat__media {
  position: relative; z-index: 1;
  margin: calc(var(--cat-pad) * -1) calc(var(--cat-pad) * -1) 0;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.ts .cat__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  transition: transform .8s var(--ease);
}
.ts .cat:hover .cat__media img { transform: scale(1.05); }
.ts .cat__name { position: relative; font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.55rem); margin: 1.4rem 0 0.7rem; line-height: 1.05; }
.ts .cat__desc { position: relative; color: var(--c-muted); font-size: 0.95rem; line-height: 1.65; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.ts .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.ts .step { border-top: 1px solid var(--c-line-strong); padding-top: 1.4rem; }
.ts .step__num { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--c-blush); line-height: 1; }
.ts .step__title { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; margin: 1rem 0 0.6rem; }
.ts .step__desc { color: var(--c-muted); font-size: 0.92rem; line-height: 1.65; }
.ts .step__date { display: block; margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.ts .steps--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .ts .steps--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ts .steps--5 { grid-template-columns: 1fr; } }
.ts .section__more { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; justify-content: center; }
.ts .section__head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; }
.ts .section__head--row .section__head-main { display: flex; flex-direction: column; gap: 0.8rem; }
@media (max-width: 700px) { .ts .section__head--row { align-items: flex-start; } }

/* ============================================================
   JUDGES / CONTESTANTS GRIDS
   ============================================================ */
.ts .grid-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.ts .grid-people--3 { grid-template-columns: repeat(3, 1fr); }

.ts .pcard { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
/* the container owns the ratio and the media fills it absolutely, so the image can
   never end up a fraction taller than the box the scrim is measured against */
.ts .pcard__media { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); transform: translateZ(0); }
.ts .pcard__media > img.pcard__img, .ts .pcard__media > .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts .pcard__media .ph { border: none; border-radius: 0; }
.ts img.pcard__img { display: block; object-fit: cover; object-position: top center; }
.ts .pcard__img { transition: transform .8s var(--ease); }
.ts .pcard:hover .pcard__img { transform: scale(1.05); }
/* inset -1px: the card height is fractional (e.g. 561.25px) and the clip of the
   zoomed image rounds to whole device pixels, which used to leave an undimmed
   hairline of photo along the bottom edge on hover */
.ts .pcard__scrim { position: absolute; inset: -1px; background: linear-gradient(to top, rgba(6,5,7,0.9) 0%, rgba(6,5,7,0.15) 45%, transparent 70%); opacity: 0.9; }
.ts .pcard__badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-on-accent); background: var(--c-accent-fill); padding: 0.35em 0.7em; border-radius: 100px;
}
.ts .pcard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 2vw, 1.4rem); }
.ts .pcard__name { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.05; color: var(--c-on-media); }
.ts .pcard__role { margin-top: 0.4rem; color: var(--c-accent-fill); font-size: 0.78rem; letter-spacing: 0.08em; }
.ts .pcard__meta { margin-top: 0.3rem; color: var(--c-on-media-soft); font-size: 0.82rem; }
.ts .pcard__arrow { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-line-strong); background: rgba(6,5,7,0.4); color: var(--c-on-media); transition: background .35s var(--ease), color .35s var(--ease); }
.ts .pcard:hover .pcard__arrow { background: var(--c-accent-fill); color: var(--c-on-accent); }
/* stage reached / status pill (top-right of contestant cards) */
.ts .pcard__stage {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-on-media); background: rgba(6,5,7,0.5); border: 1px solid rgba(255,255,255,0.16);
  padding: 0.4em 0.7em; border-radius: 100px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ts .pcard__stagedot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-faint); flex: 0 0 auto; }
.ts .pcard__stage.is-in .pcard__stagedot { background: var(--c-blush); box-shadow: 0 0 0 3px rgba(205,164,95,0.25); }
.ts .pcard__stage.is-out { color: var(--c-on-media-soft); }
.ts .pcard__stage.is-out .pcard__stagedot { background: var(--c-muted); }

/* contestant card = image + footer (votes / vote button) in one bordered container */
.ts .pcard--vote { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-panel); transition: border-color .4s var(--ease), transform .4s var(--ease); }
.ts .pcard--vote:hover { border-color: var(--c-line-strong);  }
.ts .pcard--vote .pcard__media { border: none; border-radius: 0; flex: 0 0 auto; }
.ts .pcard--vote .pcard__vote { margin-top: 0; padding: 0.9rem 1.1rem 1.05rem; border-top: 1px solid var(--c-line); }

/* contestant vote row on card */
.ts .pcard__vote { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; }
.ts .votecount { display: inline-flex; align-items: baseline; gap: 0.35rem; color: var(--c-text); font-size: 0.82rem; }
.ts .votecount b { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 1rem; font-variant-numeric: tabular-nums; }
.ts .votebtn {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-blush); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.45em 0.9em;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.ts .votebtn:hover { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-blush); }
.ts .votebtn.is-voted { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-blush); pointer-events: none; }
.ts .pcard__vote--center .pcard__more { flex: 1; justify-content: center; padding: 0.7em 1.4em; }
.ts .pcard__actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts .pcard__more {
  display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.45em 0.9em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .pcard__more:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }

/* ============================================================
   FILTERS (contestants)
   ============================================================ */
.ts .filters { display: flex; align-items: center; gap: 1.2rem 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ts .filters__row { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 1; justify-content: flex-end; }
.ts .chip {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.6em 1.1em;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.ts .chip:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.ts .chip.is-active { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-blush); }
.ts .filters__tools { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
/* crm.css (bundled into the same app.css) has its own .search: white input
   with border, 42px height, padding for an absolutely-placed icon, margin-left
   auto — all reset here, or they leak into this one. */
.ts .search {
  display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; width: 300px; max-width: 100%;
  position: static; margin-left: 0;
  border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.6em 1.1em;
  transition: border-color .3s var(--ease);
}
.ts .search:focus-within { border-color: var(--c-blush); }
.ts .search svg { position: static; width: 16px; height: 16px; color: var(--c-faint); flex-shrink: 0; }
.ts .search input {
  width: 100%; height: auto; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--c-text); font-size: 0.9rem;
}
.ts .search input:focus { outline: none; border: 0; box-shadow: none; }
.ts .search input::placeholder { color: var(--c-faint); }
.ts .filters__count { color: var(--c-muted); font-size: 0.82rem; white-space: nowrap; }
/* stage bar on its own full-width row; category + count + search below */
.ts .filters__sub { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.9rem 1.2rem; flex-wrap: wrap; }
.ts .filters__sub .filters__row { flex: 0 0 auto; justify-content: flex-start; }
.ts .searchbar { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; justify-content: flex-end; }
.ts .searchbar__input { flex: 0 0 auto; width: 300px; max-width: 100%; border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.72em 1.2em; color: var(--c-text); background: transparent; font-size: 0.9rem; transition: border-color .3s var(--ease); }
.ts .searchbar__input::placeholder { color: var(--c-faint); }
.ts .searchbar__input:focus { border-color: var(--c-blush); outline: none; }
.ts .searchbar__btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-line-strong); color: var(--c-text); background: var(--c-panel); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.ts .searchbar__btn:hover { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
@media (max-width: 600px) { .ts .searchbar { flex: 1 1 100%; } .ts .searchbar__input { flex: 1 1 auto; width: auto; } }
/* stage dropdown mirror — desktop uses the tab bar, so keep it hidden there */
.ts .stageselect { display: none; }
.ts .stagefield { position: relative; display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.72em 1.2em; background: transparent; overflow: hidden; }
.ts .stagefield__val { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); }
.ts .stagefield__num { color: var(--c-blush); font-family: var(--ff-display); font-weight: 800; }
.ts .stagefield__label { color: var(--c-text); font-weight: 500; }
.ts .stagefield__chev { flex: 0 0 auto; color: var(--c-blush); }
.ts .stagefield__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.ts .catselect { display: inline-flex; }
.ts .catselect select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--c-line-strong); border-radius: 100px;
  padding: 0.62em 2.4em 0.62em 1.15em; color: var(--c-text); background-color: var(--c-field);
  font-size: 0.86rem; font-weight: 600; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23cda45f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05em center;
}
.ts .catselect select:focus { border-color: var(--c-blush); outline: none; }
/* stage tabs — full-width, numbered; selected marked by an underline (no box/fill) */
.ts .stageseg { flex: 1 1 100%; display: flex; width: 100%; border-bottom: 1px solid var(--c-line); }
.ts .stageseg__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 1em 0.9em; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em; color: var(--c-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.ts .stageseg__num { font-family: var(--ff-display); font-weight: 800; font-size: 1.1rem; color: var(--c-blush); letter-spacing: 0.02em; }
.ts .stageseg__btn:hover:not(.is-disabled) { color: var(--c-text); }
.ts .stageseg__btn.is-active { color: var(--c-text); border-bottom-color: var(--c-blush); }
.ts .stageseg__btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ts .stageseg__soon { font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.15em 0.5em; }
@media (max-width: 760px) {
  .ts .stageseg { overflow-x: auto; scrollbar-width: none; }
  .ts .stageseg::-webkit-scrollbar { display: none; }
  .ts .stageseg__btn { flex: 0 0 auto; }
}
/* mobile: search on top; below it categories + stages share a row (contestants only) */
@media (max-width: 640px) {
  .ts .stageseg { display: none; }
  .ts .filters__sub .searchbar { order: -1; flex: 1 1 100%; }
  /* two-column category + stage layout only where a stage dropdown exists */
  .ts .filters__sub:has(.stageselect) { align-items: stretch; }
  .ts .filters__sub:has(.stageselect) .stageselect { display: block; order: 2; flex: 1 1 0; min-width: 0; }
  .ts .filters__sub:has(.stageselect) .filters__row { order: 3; flex: 1 1 0; min-width: 0; }
  .ts .filters__sub:has(.stageselect) .catselect { display: flex; width: 100%; }
  .ts .filters__sub:has(.stageselect) .catselect select { width: 100%; }
}

.ts .pcard.is-hidden { display: none; }
.ts .grid-empty { color: var(--c-muted); padding: 2rem 0; font-size: 0.95rem; }

/* ============================================================
   PROFILE (judge + contestant)
   ============================================================ */
.ts .profile { padding: clamp(2.6rem, 6vw, 4.5rem) 0 var(--block-pad); }
.ts .profile__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; }
.ts .profile__media { position: sticky; top: calc(var(--header-h) + 74px); }
.ts .profile__badge { display: inline-flex; margin-bottom: 1.2rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-fill); padding: 0.4em 0.9em; border-radius: 100px; }
.ts .profile__name { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.ts .profile__role { margin-top: 0.8rem; color: var(--c-blush); font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.06em; }
.ts .profile__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1.2rem; color: var(--c-muted); font-size: 0.92rem; }
.ts .profile__meta b { color: var(--c-text); font-weight: 600; }
.ts .profile__body { margin-top: 1.8rem; }
.ts .profile__body p { color: var(--c-muted); line-height: 1.85; font-size: clamp(1rem, 1.15vw, 1.12rem); margin-bottom: 1.3rem; }
.ts .profile__body p:last-child { margin-bottom: 0; }

.ts .factbox { margin-top: 2rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel); padding: clamp(1.4rem, 3vw, 1.9rem); }
.ts .factbox__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); }
.ts .factbox__row:last-child { border-bottom: none; }
.ts .factbox__k { color: var(--c-muted); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ts .factbox__v { color: var(--c-text); font-weight: 600; text-align: right; font-size: 0.92rem; }

.ts .profile__subhead { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.15rem; margin: 2.4rem 0 1rem; }
.ts .taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* crm.css .tag is a status pill with a coloured dot (::before) — not this tag. */
:where(.ts) .tag { display: block; align-items: normal; gap: normal; font-weight: inherit; }
:where(.ts) .tag::before { content: none; }
.ts .tag { font-size: 0.76rem; color: var(--c-text); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.45em 0.95em; }

/* ============================================================
   CONTESTANT PROFILE — block layout (photo not cropped, no sticky)
   ============================================================ */
.ts .cprofile { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--block-pad); }
.ts .cprofile__hero {
  display: grid; grid-template-columns: 340px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.ts .cprofile__photo {
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--c-surface);
}
.ts .cprofile__photo .ph { border: none; border-radius: 0; aspect-ratio: 4 / 5; }
.ts .cprofile__photo img { width: 100%; height: auto; display: block; }
.ts .cprofile__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ts .videoph__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius); }
/* video lightbox */
.ts .vmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.ts .vmodal[hidden] { display: none; }
.ts .vmodal__backdrop { position: absolute; inset: 0; background: rgba(6,5,7,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ts .vmodal__dialog { position: relative; width: min(960px, 100%); }
.ts .vmodal__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line-strong); background: #000; }
.ts .vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ts .vmodal__close { position: absolute; top: -3rem; right: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-on-media); border: 1px solid rgba(255,255,255,0.2); background: rgba(6,5,7,0.5); transition: background .3s var(--ease), color .3s var(--ease); }
.ts .vmodal__close:hover { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
.ts .cprofile__intro .profile__badge { margin-bottom: 0.35rem; }
.ts .cprofile__name { font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 0.3rem 0 0.4rem; line-height: 1; }
.ts .cprofile__act { color: var(--c-blush); font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.02em; }
.ts .cprofile__desc { margin-top: 1.2rem; color: var(--c-muted); line-height: 1.75; font-size: clamp(1rem, 1.15vw, 1.12rem); max-width: 56ch; }
.ts .cprofile__facts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.ts .cfact { display: inline-flex; align-items: center; gap: 0.7em; border: 1px solid var(--c-line); border-radius: 12px; padding: 0.6em 1.05em; background: var(--c-panel); }
.ts .cfact__k { color: var(--c-faint); text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.6rem; font-weight: 700; line-height: 1; }
.ts .cfact__k::after { content: ""; display: inline-block; width: 1px; height: 0.9em; background: var(--c-line-strong); margin-left: 0.7em; vertical-align: -0.12em; }
.ts .cfact__v { color: var(--c-text); font-weight: 600; font-size: 0.92rem; line-height: 1; }

/* vote area: stat number + separate gold CTA */
.ts .cprofile__votewrap { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.5rem; }
.ts .cprofile__votestat { display: inline-flex; flex-direction: column; gap: 0.15rem; padding-right: 1.5rem; border-right: 1px solid var(--c-line); }
.ts .cprofile__votestat b { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--c-blush); line-height: 1; font-variant-numeric: tabular-nums; }
.ts .cprofile__votestat span { color: var(--c-muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ts .cprofile__votebtn.is-voted { pointer-events: none; --bg: var(--c-blush-light); }
.ts .cprofile__votehint { color: var(--c-faint); font-size: 0.8rem; flex: 1 1 100%; margin: 0; }
@media (max-width: 520px) { .ts .cprofile__votestat { border-right: none; padding-right: 0; } }

.ts .cblocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.ts .cblocks > * { min-width: 0; }

/* judge bio in hero */
.ts .cprofile__bio { margin-top: 1.3rem; display: grid; gap: 0.85rem; max-width: none; }
.ts .cprofile__bio p { color: var(--c-muted); line-height: 1.75; font-size: clamp(0.98rem, 1.1vw, 1.08rem); }

/* judge credentials showcase */
.ts .judgecred { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.ts .judgecred__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
.ts .jstat { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel); padding: clamp(1.1rem, 2.6vw, 1.7rem); }
.ts .jstat b { display: block; font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ts .jstat span { display: block; margin-top: 0.55rem; color: var(--c-muted); font-size: 0.85rem; letter-spacing: 0.02em; }
.ts .jcredits__head { margin-bottom: 0; }
.ts .jcredits__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 0.5rem; }
.ts .jcredits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2vw, 1.2rem); }
.ts .jcredit { position: relative; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel); overflow: hidden; transition: border-color .4s var(--ease), transform .4s var(--ease); }
.ts .jcredit:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.ts .jcredit__media { position: relative; overflow: hidden; }
.ts .jcredit__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.ts .jcredit:hover .jcredit__media img { transform: scale(1.04); }
.ts .jcredit__role { position: absolute; top: 0.85rem; left: 0.85rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-fill); border-radius: 100px; padding: 0.35em 0.75em; }
.ts .jcredit__body { padding: clamp(1.1rem, 2.4vw, 1.5rem); }
.ts .jcredit__show { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.05; }
.ts .jcredit__body p { color: var(--c-muted); font-size: 0.86rem; line-height: 1.6; margin-top: 0.55rem; }
.ts .jexpertise .taglist { margin-top: 0.8rem; }
/* alternating photo / description feature rows */
.ts .jfeature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.ts .jfeature__media { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.ts .jfeature__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.ts .jfeature:hover .jfeature__media img { transform: scale(1.03); }
.ts .jfeature--rev .jfeature__media { order: -1; }
.ts .jfeature__text .jcredit__role { position: static; display: inline-block; margin-bottom: 0.9rem; }
/* per-block media gallery */
.ts .jgallery.jfeature__media { border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 0.7rem; }
.ts .jgallery__main { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.ts .jgallery__main img, .ts .jgallery__main iframe { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; }
.ts .jgallery__thumbs { display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ts .jgallery__thumbs::-webkit-scrollbar { display: none; }
/* config talent_show.judge_gallery_thumbs = false: just the first picture */
.ts .cprofile--single-media .jgallery__thumbs { display: none; }
.ts .jthumb { position: relative; flex: 0 0 auto; width: 72px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: 0.6; cursor: pointer; transition: opacity .25s var(--ease), border-color .25s var(--ease); }
.ts .jthumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ts .jthumb:hover { opacity: 1; }
.ts .jthumb.is-active { opacity: 1; border-color: var(--c-blush); }
.ts .jthumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(6,5,7,0.35); }
.ts .jthumb__play svg { width: 18px; height: 18px; }
.ts .jfeature__show { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.05; margin-bottom: 0.7rem; }
.ts .jfeature__text p { color: var(--c-muted); line-height: 1.75; font-size: clamp(0.98rem, 1.1vw, 1.08rem); max-width: 52ch; }
.ts .videos--row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .ts .judgecred__stats { grid-template-columns: 1fr; }
  .ts .jcredits__grid { grid-template-columns: 1fr; }
  .ts .jfeature { grid-template-columns: 1fr; }
  /* on mobile every feature row shows the photo above the text */
  .ts .jfeature .jfeature__media { order: -1; }
}
.ts .cblock {
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.ts .cblock--wide { grid-column: 1 / -1; }
.ts .cblock__title { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem; margin-bottom: 1rem; color: var(--c-blush); }
.ts .cblock__body p { color: var(--c-muted); line-height: 1.8; font-size: clamp(1rem, 1.1vw, 1.1rem); margin-bottom: 1rem; }
.ts .cblock__body p:last-child { margin-bottom: 0; }
.ts .cblock .factbox { border: none; background: none; padding: 0; }
.ts .cblock .videos { margin-top: 0; }
.ts .cblock .videoph__note { margin-top: 1rem; }
.ts .cprofile__foot { margin-top: clamp(1.5rem, 3vw, 2.2rem); display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 800px) {
  .ts .cprofile__hero { grid-template-columns: 1fr; }
  .ts .cprofile__photo { max-width: none; width: 100%; }
  .ts .cblocks { grid-template-columns: minmax(0, 1fr); }
}

/* performance videos — 2 per row (supports many) */
.ts .videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.2rem); margin-top: 1rem; }
.ts .videos .videoph { margin-top: 0; }
.ts .videos .videoph__play { width: 54px; height: 54px; }
.ts .videos .videoph__play svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .ts .videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ts .videos { grid-template-columns: 1fr; } }

/* video placeholder w/ play */
.ts .videoph { position: relative; margin-top: 1.6rem; cursor: pointer; }
.ts .videoph .ph { width: 100%; }
.ts .videoph__play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-fill); color: var(--c-on-accent);
  box-shadow: 0 12px 40px -8px rgba(205, 164, 95, 0.6);
  transition: transform .4s var(--ease);
}
.ts .videoph:hover .videoph__play { transform: scale(1.08); }
.ts .videoph__note { margin-top: 0.8rem; font-size: 0.8rem; color: var(--c-faint); }
/* cover variant: image fills the whole card, small play icon in the corner */
.ts .videoph--cover { margin-top: 0; display: block; height: 100%; }
.ts .videoph--cover .videoph__play { inset: auto; margin: 0; top: 0.9rem; left: 0.9rem; right: auto; width: auto; height: auto; gap: 0.5em; padding: 0.55em 1em; border-radius: 100px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.ts .videoph--cover .videoph__play svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ts .videoph--cover:hover .videoph__play { transform: none; filter: brightness(1.05); }

.ts .profile__vote { margin-top: 2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel); }
.ts .profile__vote .votecount b { font-size: 1.6rem; }

/* ============================================================
   LIVE AUDIENCE VOTE (leaderboard)
   ============================================================ */
.ts .live { border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel-2); padding: clamp(1.4rem, 3vw, 2.4rem); }
.ts .live__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.ts .live__title { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.ts .live__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-blush); }
.ts .live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-error); box-shadow: 0 0 0 0 rgba(224, 90, 90, 0.6); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(224,90,90,0.6); } 100% { box-shadow: 0 0 0 10px rgba(224,90,90,0); } }
.ts .live__list { display: flex; flex-direction: column; gap: 0.9rem; }
.ts .live__row { display: grid; grid-template-columns: 2rem 1.4fr 3fr auto; align-items: center; gap: 0.9rem; }
.ts .live__rank { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 1rem; }
.ts .live__who { display: flex; flex-direction: column; }
.ts .live__name { font-weight: 600; font-size: 0.92rem; }
.ts .live__cat { color: var(--c-muted); font-size: 0.74rem; }
.ts .live__bar { height: 12px; border-radius: 100px; background: var(--c-track); border: 1px solid var(--c-line-strong); overflow: hidden; }
.ts .live__fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #c47a24, #f0b64d); box-shadow: 0 0 16px -2px rgba(230, 150, 60, 0.6); width: 0; transition: width 1.1s var(--ease); }
.ts .live__pct { font-family: var(--ff-display); font-weight: 700; font-size: 0.92rem; color: var(--c-text); font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }

/* ============================================================
   PARTNERS
   ============================================================ */
/* public.css's own .partners (homepage) also adds padding + a top border —
   reset both, this one is already nested inside a .section. */
.ts .partners { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.8rem, 1.6vw, 1.2rem); padding: 0; border-top: none; overflow: visible; }
.ts .partner { display: flex; align-items: center; justify-content: center; height: clamp(72px, 9vw, 108px); border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-panel-soft); color: var(--c-faint); font-family: var(--ff-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; transition: color .35s var(--ease), border-color .35s var(--ease); }
.ts .partner:hover { color: var(--c-blush); border-color: var(--c-line-strong); }
.ts .partner img { max-width: 62%; max-height: 52%; object-fit: contain; opacity: 0.7; transition: opacity .35s var(--ease); }
.ts .partner:hover img { opacity: 1; }

/* judges preview swiper */
.ts .jprev__carousel { overflow: visible; }
.ts .jprev__carousel .swiper-slide { height: auto; }

/* ============================================================
   CTA band
   ============================================================ */
/* ----------  Organizers page: one full-width section per organizer  ---------- */
.ts .orgs { display: flex; flex-direction: column; }
.ts .org {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 5vw, 5rem); align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--c-line);
}
.ts .org:last-child { border-bottom: 1px solid var(--c-line); }
.ts .org--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ts .org--flip .org__logo { order: 2; }
/* partner logos are drawn for a light ground, so they sit on a light plate in
   both themes */
.ts .org__logo {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10;
  padding: clamp(1.8rem, 5vw, 3.6rem);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: #fff;   /* white, so a logo that comes as a JPG on white blends in */
}
.ts .org__logo img { width: 100%; height: 100%; object-fit: contain; }
.ts .org__name { font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.02; margin: 0.9rem 0 1.1rem; }
.ts .org__text { color: var(--c-muted); font-size: 1rem; line-height: 1.7; max-width: 60ch; }
.ts .org__text + .org__text { margin-top: 0.8rem; }
.ts .org__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.ts .org__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6em 1.1em;
  border: 1px solid var(--c-line-strong); border-radius: 100px;
  color: var(--c-text); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .org__link svg { color: var(--c-blush); flex-shrink: 0; }
.ts .org__link:hover { color: var(--c-blush); border-color: var(--c-blush); background: var(--c-gold-wash-2); }
@media (max-width: 860px) {
  .ts .org, .ts .org--flip { grid-template-columns: 1fr; }
  .ts .org--flip .org__logo { order: 0; }
  .ts .org__logo { aspect-ratio: 16 / 9; }
}

.ts .ctaband { position: relative; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: radial-gradient(90% 140% at 50% 0%, rgba(205, 164, 95, 0.16), transparent 60%), var(--c-panel-2); padding: clamp(3rem, 7vw, 5.5rem) var(--gut); text-align: center; overflow: hidden; }
.ts .ctaband__title { font-size: clamp(2rem, 5vw, 4rem); max-width: 20ch; margin-inline: auto; }
.ts .ctaband__lead { margin: 1.4rem auto 2.2rem; color: var(--c-muted); max-width: 52ch; line-height: 1.7; }
.ts .ctaband__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.ts .ctaband .u-eyebrow { justify-content: center; margin-bottom: 1rem; }

/* Shop preview grid on the landing page */
.ts .merchgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 900px) { .ts .merchgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ts .merchgrid { grid-template-columns: 1fr; } }
.ts .merchcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.ts .merchcard:hover { border-color: var(--c-line-strong); transform: translateY(-4px); }
.ts .merchcard__media { aspect-ratio: 1; overflow: hidden; background: var(--c-panel-soft); }
.ts .merchcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ts .merchcard:hover .merchcard__media img { transform: scale(1.05); }
.ts .merchcard__body { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: clamp(.9rem, 1.6vw, 1.2rem); }
.ts .merchcard__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.ts .merchcard__price { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); }

/* Rules callout card */
.ts .rulescard {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: radial-gradient(120% 160% at 0% 0%, rgba(205, 164, 95, 0.14), transparent 55%), var(--c-panel-2);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
}
.ts .rulescard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-blush); }
.ts .rulescard__icon {
  display: grid; place-items: center;
  width: clamp(52px, 6vw, 68px); aspect-ratio: 1; border-radius: 16px;
  background: rgba(205, 164, 95, 0.14); color: var(--c-blush);
  border: 1px solid var(--c-line-strong);
}
.ts .rulescard__title { font-size: clamp(1.4rem, 2.8vw, 2.1rem); margin: 0.5rem 0 0.7rem; }
.ts .rulescard__body p { color: var(--c-muted); max-width: 60ch; line-height: 1.65; }
.ts .rulescard__cta { white-space: nowrap; }
@media (max-width: 760px) {
  .ts .rulescard { grid-template-columns: 1fr; text-align: left; }
  .ts .rulescard__cta { justify-self: start; }
}

/* ============================================================
   FORM (apply)
   ============================================================ */
.ts .form { max-width: 100%; min-width: 0; }
.ts .formsec { border: 0; border-top: 1px solid var(--c-line); padding-top: clamp(2rem, 4vw, 2.8rem); margin-top: clamp(2rem, 4vw, 2.8rem); min-width: 0; scroll-margin-top: calc(var(--header-h) + 80px); }
.ts .formsec:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ts .formsec__head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.6rem; }
.ts .formsec__num { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 0.9rem; }
.ts .formsec__title { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.ts .formsec__hint { color: var(--c-faint); font-size: 0.82rem; margin-top: 0.4rem; }

.ts .fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.4rem; }
.ts .field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0; }
.ts .field--full { grid-column: 1 / -1; }
.ts .field__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-muted); }
.ts .field__label span { color: var(--c-blush); }
/* only the required-asterisk span is gold; a label word switched per format (Duet name / Group name) keeps the label colour */
.ts .field__label [data-format-label] { color: inherit; }
.ts .field__input, .ts .field__select, .ts .field__area {
  width: 100%; color: var(--c-text); font-size: 0.95rem;
  background-color: var(--c-field); border: 1px solid var(--c-line-strong); border-radius: 14px;
  padding: 0.85em 1em; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ts .field__area { min-height: 120px; resize: vertical; line-height: 1.6; }
.ts .field__input::placeholder, .ts .field__area::placeholder { color: var(--c-faint); }
/* background-color, not the shorthand: the shorthand also clears
   background-image, which is the chevron drawn on .field__select */
.ts .field__input:focus, .ts .field__select:focus, .ts .field__area:focus { border-color: var(--c-blush); background-color: var(--c-field-focus); }
.ts .field__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23cda45f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.4em; }

/* number inputs — remove native spinners (they break the dark theme) */
.ts .field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ts .field__input[type="number"]::-webkit-outer-spin-button, .ts .field__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* date / time — recolor the native picker icon to gold */
.ts .field__input[type="date"], .ts .field__input[type="time"] { color-scheme: dark; }
.ts[data-theme="light"] .field__input[type="date"], .ts[data-theme="light"] .field__input[type="time"] { color-scheme: light; }
/* the gold-ising filter is only needed against the dark UI icon */
.ts[data-theme="light"] .field__input[type="date"]::-webkit-calendar-picker-indicator, .ts[data-theme="light"] .field__input[type="time"]::-webkit-calendar-picker-indicator { filter: none; }
.ts .field__input[type="date"]::-webkit-calendar-picker-indicator, .ts .field__input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.65;
  filter: invert(72%) sepia(28%) saturate(720%) hue-rotate(2deg) brightness(92%);
  transition: opacity .25s var(--ease);
}
.ts .field__input[type="date"]::-webkit-calendar-picker-indicator:hover, .ts .field__input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* clear the little search "x" that some browsers add */
.ts .search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* ---- site CSS that reaches into these forms (public.css .field label / .field input,
   crm.css .field label / .check) through heavier selectors than the mockup's own
   classes. :where(.ts) keeps each reset above the site rule it undoes but below the
   mockup's .ts .x rules, so the design still decides every value it declares. ---- */
:where(.ts) .field label { margin-bottom: 0; text-transform: none; letter-spacing: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
:where(.ts) .field input:not(.field__input), :where(.ts) .field select:not(.field__select), :where(.ts) .field textarea:not(.field__area) {
  width: auto; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
}
:where(.ts) .check { color: inherit; }
:where(.ts) .check input { width: auto; height: auto; accent-color: auto; }

.ts .field__file { border: 1px dashed var(--c-line-strong); border-radius: 14px; padding: 1.1em 1em; color: var(--c-muted); font-size: 0.88rem; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease); }
.ts .field__file:hover { border-color: var(--c-blush); color: var(--c-text); }
.ts .field__file input { display: none; }

/* custom date picker (on-brand, replaces native calendar) */
.ts .dp { position: relative; }
.ts .dp__input { padding-right: 2.8em; cursor: pointer; }
.ts .dp__icon { position: absolute; right: 1em; top: 0.95em; color: var(--c-blush); cursor: pointer; display: flex; opacity: 0.85; transition: opacity .25s var(--ease); }
.ts .dp__icon:hover { opacity: 1; }
.ts .dp__pop {
  position: absolute; z-index: 40; top: calc(100% + 0.5rem); left: 0; width: 300px; max-width: 92vw;
  background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: 16px;
  box-shadow: 0 26px 60px -22px var(--c-shadow); padding: 0.9rem;
}
.ts .dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.ts .dp__title { font-family: var(--ff-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.ts .dp__nav { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--c-text); border: 1px solid var(--c-line); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.ts .dp__nav:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }
.ts .dp__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.ts .dp__dow span { text-align: center; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-faint); padding: 0.3rem 0; }
.ts .dp__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ts .dp__day { aspect-ratio: 1; border-radius: 9px; font-size: 0.85rem; color: var(--c-text); display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); }
.ts .dp__day:hover { background: var(--c-gold-wash-3); color: var(--c-blush); }
.ts .dp__day.is-today { border: 1px solid var(--c-line-strong); }
.ts .dp__day.is-selected { background: var(--c-accent-fill); color: var(--c-on-accent); font-weight: 700; }
.ts .dp__foot { display: flex; justify-content: space-between; margin-top: 0.7rem; border-top: 1px solid var(--c-line); padding-top: 0.7rem; }
.ts .dp__link { font-size: 0.78rem; font-weight: 600; color: var(--c-blush); transition: color .25s var(--ease); }
.ts .dp__link:hover { color: var(--c-blush-light); }
.ts .field.is-invalid .field__input, .ts .field.is-invalid .field__select, .ts .field.is-invalid .field__area { border-color: var(--c-error); }
.ts .field__error { display: none; color: var(--c-error-soft); font-size: 0.76rem; }
.ts .field.is-invalid .field__error { display: block; }

/* radio + checkbox */
.ts .optset { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ts .opt { position: relative; }
.ts .opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ts .opt__box { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--c-muted); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.6em 1.1em; transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.ts .opt input:checked + .opt__box { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-blush); }
.ts .opt input:focus-visible + .opt__box { outline: 2px solid var(--c-blush); outline-offset: 3px; }

.ts .checks { display: flex; flex-direction: column; gap: 1rem; }
.ts .check { display: flex; gap: 0.9rem; align-items: flex-start; cursor: pointer; }
.ts .check { position: relative; }   /* keeps the hidden input inside its own label — focusing it must not scroll some outer box */
.ts .check input { position: absolute; top: 0; left: 0; opacity: 0; }
.ts .check__box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--c-line-strong); display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background .25s var(--ease), border-color .25s var(--ease); }
.ts .check__box svg { opacity: 0; transform: scale(0.6); transition: opacity .2s var(--ease), transform .2s var(--ease); color: var(--c-on-accent); }
.ts .check input:checked + .check__box { background: var(--c-accent-fill); border-color: var(--c-blush); }
.ts .check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.ts .check input:focus-visible + .check__box { outline: 2px solid var(--c-blush); outline-offset: 3px; }
.ts .check__text { color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; }
.ts .check__text b { color: var(--c-text); font-weight: 600; }
.ts .check__text a { color: var(--c-blush); text-decoration: underline; text-underline-offset: 2px; }

.ts .fee { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.ts .fee b { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); }

.ts .form__foot { margin-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid var(--c-line); padding-top: clamp(2rem, 4vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.ts .form__note { color: var(--c-faint); font-size: 0.82rem; }

/* apply success */
.ts .applied { display: none; text-align: center; max-width: 640px; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.ts .applied.is-shown { display: block; }
.ts .applied__icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1.6rem; display: flex; align-items: center; justify-content: center; background: var(--c-accent-fill); color: var(--c-on-accent); box-shadow: 0 14px 44px -8px rgba(205, 164, 95, 0.6); }
.ts .applied__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.ts .applied__text { color: var(--c-muted); line-height: 1.7; margin: 1.2rem 0 1.6rem; }
.ts .applied__id { display: inline-flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel-2); padding: 1.2rem 2rem; margin-bottom: 1.8rem; }
.ts .applied__id small { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.ts .applied__id b { font-family: var(--ff-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--c-blush); letter-spacing: 0.06em; }

/* ============================================================
   RULES page
   ============================================================ */
.ts .rules { padding-bottom: var(--block-pad); }
.ts .rules__layout { display: grid; grid-template-columns: 0.35fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ts .rules__content { min-width: 0; }
.ts .rules__block, .ts .rules__block p, .ts .rules__block li { overflow-wrap: break-word; }
.ts .rules__toc { position: sticky; top: calc(var(--header-h) + 74px); display: flex; flex-direction: column; gap: 0.3rem; }
.ts .rules__toc-list { display: flex; flex-direction: column; gap: 0.3rem; }
.ts .rules__toc-title { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-blush); margin-bottom: 0.8rem; }
.ts .rules__toc a { color: var(--c-muted); font-size: 0.9rem; padding: 0.5em 0; border-left: 1px solid var(--c-line); padding-left: 1rem; transition: color .3s var(--ease), border-color .3s var(--ease); }
.ts .rules__toc a:hover, .ts .rules__toc a.is-active { color: var(--c-blush); border-color: var(--c-blush); }
.ts .rules__block { border-top: 1px solid var(--c-line); padding-top: clamp(1.8rem, 3vw, 2.4rem); margin-top: clamp(1.8rem, 3vw, 2.4rem); scroll-margin-top: calc(var(--header-h) + 80px); }
.ts .rules__block:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.ts .rules__block h2 { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.ts .rules__block p { color: var(--c-muted); line-height: 1.8; margin-bottom: 1rem; }
.ts .rules__block ul.rules__ul { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 1rem; }
.ts .rules__block ul.rules__ul li { color: var(--c-muted); line-height: 1.7; padding-left: 1.4rem; position: relative; }
.ts .rules__block ul.rules__ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blush); }
.ts .rules__block ol.rules__ul { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 1rem; counter-reset: rules-o; list-style: none; }
.ts .rules__block ol.rules__ul > li { color: var(--c-muted); line-height: 1.7; padding-left: 1.8rem; position: relative; }
.ts .rules__block ol.rules__ul > li::before { counter-increment: rules-o; content: counter(rules-o) "."; position: absolute; left: 0; top: 0; color: var(--c-blush); font-weight: 700; }
.ts .rules__block .rules__ul .rules__ul { margin: 0.6rem 0 0.2rem; }
.ts .rules__flag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.35em 0.8em; margin-bottom: 1rem; }

/* ============================================================
   NEWS — listing + article
   ============================================================ */
.ts .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.ts .ncard { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-panel); transition: border-color .4s var(--ease), transform .4s var(--ease); }
.ts .ncard:hover { border-color: var(--c-line-strong); transform: translateY(-4px); }
.ts .ncard__media { display: block; overflow: hidden; }
.ts .ncard__media .ph { border: none; border-radius: 0; }
.ts .ncard__media .ph { transition: transform .8s var(--ease); }
.ts .ncard:hover .ncard__media .ph { transform: scale(1.04); }
.ts .ncard__media img.ncard__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.ts .ncard:hover .ncard__media img.ncard__img { transform: scale(1.04); }
.ts .ncard__body { padding: clamp(1.2rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.ts .ncard__meta { display: flex; align-items: center; gap: 0.8rem; }
.ts .ncard__tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-fill); padding: 0.35em 0.7em; border-radius: 100px; }
.ts .ncard__date { color: var(--c-faint); font-size: 0.78rem; }
.ts .ncard__title { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.1; }
.ts .ncard__title a { transition: color .3s var(--ease); }
.ts .ncard__title a:hover { color: var(--c-blush); }
.ts .ncard__excerpt { color: var(--c-muted); font-size: 0.92rem; line-height: 1.6; }
.ts .ncard__more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-blush); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: auto; transition: gap .3s var(--ease); }
.ts .ncard__more:hover { gap: 0.7rem; }
@media (max-width: 900px) { .ts .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ts .news-grid { grid-template-columns: 1fr; } }

.ts .article { padding: clamp(2rem, 5vw, 3.5rem) 0 var(--block-pad); }
.ts .article__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ts .article__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.ts .article__tag { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-accent); background: var(--c-accent-fill); padding: 0.4em 0.8em; border-radius: 100px; }
.ts .article__date { color: var(--c-muted); font-size: 0.85rem; }
.ts .article__title { font-size: clamp(2rem, 5vw, 3.6rem); }
.ts .article__media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line-strong); margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.ts .article__media .ph { border: none; border-radius: 0; aspect-ratio: 2.5 / 1; }
.ts .article__media img.article__img { display: block; width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover; }
.ts .article__body { max-width: none; }
.ts .article__body p { color: var(--c-muted); line-height: 1.9; font-size: clamp(1.02rem, 1.2vw, 1.15rem); margin-bottom: 1.4rem; }
.ts .article__body p:last-child { margin-bottom: 0; }
.ts .related { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--c-line); padding-top: clamp(2rem, 4vw, 2.8rem); }
.ts .related__h { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.2rem; margin-bottom: 1.4rem; }
.ts .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.2rem); }
.ts .related__item { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 1.4rem); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.ts .related__item:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.ts .related__tag { color: var(--c-blush); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.ts .related__title { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; font-size: 1rem; line-height: 1.15; }
.ts .related__date { color: var(--c-faint); font-size: 0.78rem; }
@media (max-width: 700px) { .ts .related__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SHOP — single-page merch store
   ============================================================ */
.ts .shop { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.ts .shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.8vw, 1.3rem); }
.ts .shopcard { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-panel); display: flex; flex-direction: column; transition: border-color .4s var(--ease), transform .4s var(--ease); }
.ts .shopcard:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.ts .shopcard__media .ph { border: none; border-radius: 0; aspect-ratio: 4 / 3; }
.ts .shopcard__media { aspect-ratio: 1 / 1; background: var(--c-field); overflow: hidden; }
.ts .shopcard__media img.shopcard__img { display: block; width: 100%; height: 100%; object-fit: contain; padding: clamp(0.6rem, 2vw, 1.2rem); transition: transform .6s var(--ease); }
.ts .shopcard:hover .shopcard__media img.shopcard__img { transform: scale(1.04); }
.ts .shopcard__body { padding: clamp(1rem, 2vw, 1.3rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.ts .shopcard__name { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: 1rem; line-height: 1.1; }
.ts .shopcard__desc { color: var(--c-muted); font-size: 0.82rem; line-height: 1.5; }
.ts .shopcard__price { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 1.25rem; margin-top: auto; }
.ts .shopcard__controls { display: flex; gap: 0.7rem; align-items: center; flex-wrap: nowrap; margin-top: 0.7rem; }
.ts .shopcard__desc { min-height: 3em; }
.ts .shopcard__size { flex: 1 1 auto; min-width: 0; }
.ts .shopcard__size select { width: 100%; }
.ts .shopcard__size select { border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.55em 2.2em 0.55em 1.1em; color: var(--c-text); background: var(--c-field); appearance: none; font-size: 0.85rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23cda45f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; }
.ts .shopcard__size select:focus { border-color: var(--c-blush); }
@media (max-width: 600px) { .ts .shopcard__size { flex: 0 1 auto; } .ts .shopcard__size select { width: auto; min-width: 0; } }
.ts .shopcard__size select option { background-color: #17120f; color: #efe7da; }
/* landing preview cards are wider — keep the size select compact */
.ts #shop-preview .shopcard__size { flex: 0 1 auto; }
.ts #shop-preview .shopcard__size select { width: auto; min-width: 0; }
.ts .qtybox { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.2rem; }
.ts .qtybox button { width: 30px; height: 30px; border-radius: 50%; color: var(--c-text); font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .25s var(--ease), color .25s var(--ease); }
.ts .qtybox button:hover { background: var(--c-accent-fill); color: var(--c-on-accent); }
.ts .qtybox span { min-width: 28px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.ts .shopcard__add { margin-top: 0.6rem; }

.ts .shop__cart { position: sticky; top: calc(var(--header-h) + 74px); }
.ts .shopcart { border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel-2); padding: clamp(1.3rem, 2.5vw, 1.7rem); }
.ts .shopcart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.1rem; }
.ts .shopcart__title { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; }
.ts .shopcart__count { color: var(--c-muted); font-size: 0.8rem; white-space: nowrap; }
.ts .shopcart__items { display: flex; flex-direction: column; gap: 0.8rem; min-height: 56px; }
.ts .shopcart__empty { color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; }
.ts .shopcart__empty span { color: var(--c-faint); font-size: 0.82rem; }
.ts .shopcart__item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.7rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--c-line); }
.ts .shopcart__info b { display: block; font-size: 0.88rem; }
.ts .shopcart__info span { color: var(--c-muted); font-size: 0.75rem; }
.ts .shopcart__price { font-weight: 700; color: var(--c-blush); font-size: 0.9rem; }
.ts .shopcart__rm { width: 24px; height: 24px; border-radius: 50%; color: var(--c-muted); border: 1px solid var(--c-line); font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color .25s var(--ease), border-color .25s var(--ease); }
.ts .shopcart__rm:hover { color: var(--c-error-soft); border-color: var(--c-error-soft); }
.ts .shopcart__foot { margin-top: 1.2rem; }
.ts .shopcart__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.ts .shopcart__total span { color: var(--c-muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ts .shopcart__total b { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 1.6rem; }
.ts .shopcart__note { color: var(--c-faint); font-size: 0.76rem; margin-top: 0.8rem; text-align: center; }
.ts .btn.is-disabled { opacity: 0.45; pointer-events: none; }
.ts .shop__pager { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 2.5rem); }
.ts .shop__pager .pagin { grid-column: 1; }
@media (max-width: 900px) { .ts .shop { grid-template-columns: 1fr; } .ts .shop__cart { position: static; } .ts .shop__pager { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .ts .shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .ts .shop__grid { grid-template-columns: 1fr; } }

/* ============================================================
   JURY CABINET — own header (no site menu, no sub-nav)
   ============================================================ */
/* nothing sits between the fixed header and the content here, so the
   page carries the offset the sub-nav used to provide */
.ts .cabinet { padding-top: calc(var(--header-h) + clamp(1.2rem, 3vw, 2.4rem)); }

/* cabinet menu sits beside the logo; the actions keep the right edge */
.ts .header--cabinet .header__bar { gap: clamp(2.4rem, 5.2vw, 4.4rem); }
.ts .header--cabinet .nav { margin-right: auto; }

.ts .juryuser {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding-left: 1.1rem; border-left: 1px solid var(--c-line);
}
.ts .juryuser__avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  font-family: var(--ff-display); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--c-blush);
}
.ts .juryuser__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts .juryuser__id { display: flex; flex-direction: column; line-height: 1.2; }
.ts .juryuser__name { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.ts .juryuser__role { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-faint); }

.ts .logout {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.6em 1.1em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .logout:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }
.ts .logout svg { transition: transform .35s var(--ease); }
.ts .logout:hover svg { transform: translateX(2px); }

/* the cabinet menu is a single item — it never collapses into a burger */
@media (max-width: 1000px) {
  .ts .header--cabinet .nav, .ts .header--cabinet .header__actions .lang { display: flex; }
  .ts .header--cabinet .juryuser__id { display: none; }
  .ts .header--cabinet .juryuser { padding-left: 0.8rem; }
}
@media (max-width: 620px) {
  .ts .header--cabinet .header__actions .lang { display: none; }
  .ts .header--cabinet .logout span { display: none; }
  .ts .header--cabinet .logout { padding: 0.6em 0.8em; }
}

/* ============================================================
   JURY CABINET — review cards + pagination
   ============================================================ */
.ts .cabinet-note { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--c-muted); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.5em 1em; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.ts .cabinet-note svg { color: var(--c-blush); }
.ts .cabinet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }

/* ----------  category tabs above the grid  ---------- */
.ts .jtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: clamp(1.3rem, 2.6vw, 1.9rem); }
.ts .jtab {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.6em 1.15em;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.ts .jtab:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.ts .jtab.is-active { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-accent-fill); }
.ts .jtab__count { opacity: 0.65; margin-left: 0.4em; font-variant-numeric: tabular-nums; }
/* not a filter — an action, so it sits apart at the right edge */
.ts .jtab--voted {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--c-blush); border-color: var(--c-line-strong);
}
.ts .jtab--voted:hover { color: var(--c-blush); border-color: var(--c-blush); background: var(--c-gold-wash); }
@media (max-width: 700px) { .ts .jtab--voted { margin-left: 0; } }

/* ----------  participant card  ---------- */
.ts .jcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  background: var(--c-panel);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.ts .jcard:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }

/* photo: full width of the card, 3/4 portrait */
.ts .jcard.is-hidden { display: none; }
.ts .jcard__media { display: block; position: relative; overflow: hidden; background: var(--c-surface); }
.ts .jcard__img, .ts .jcard__media .ph { display: block; width: 100%; height: auto; aspect-ratio: 3 / 3.5; object-fit: cover; transition: transform .8s var(--ease); }
.ts .jcard__media .ph { border: none; border-radius: 0; }
.ts .jcard:hover .jcard__img, .ts .jcard:hover .jcard__media .ph { transform: scale(1.04); }
.ts .jcard__media .ph::after { content: ""; }

.ts .jcard__body { display: flex; flex-direction: column; gap: 0.35rem; padding: clamp(1rem, 2vw, 1.3rem); }
.ts .jcard__name {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.12;
}
.ts .jcard__name a { transition: color .3s var(--ease); }
.ts .jcard__name a:hover { color: var(--c-blush); }
/* age reads quieter than the name */
.ts .jcard__age { color: var(--c-muted); }
.ts .jcard__city { color: var(--c-muted); font-size: 0.82rem; }

/* rating on the left, comments + details on the right */
.ts .jcard__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--c-line);
}
.ts .jrate { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.ts .jrate__num { font-family: var(--ff-display); font-weight: 800; font-size: 1.15rem; color: var(--c-blush); font-variant-numeric: tabular-nums; line-height: 1; }
.ts .jrate__sep { color: var(--c-faint); font-size: 0.9rem; line-height: 1; }
.ts .jrate__word { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
/* verdict hidden while an act is still being judged... */
.ts .jrate__sep, .ts .jrate__word { display: none; }
/* ...and shown on the page that lists what has already been scored */
.ts .cabinet-grid--voted .jrate__sep, .ts .cabinet-grid--voted .jrate__word { display: inline; }
.ts .jrate__word.is-yes { color: var(--c-blush); }
.ts .jrate__word.is-no { color: var(--c-faint); }

.ts .jcard__tools { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts .jicon {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-muted); border: 1px solid var(--c-line);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .jicon:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }
.ts .jicon__count {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 100px; background: var(--c-accent-fill); color: var(--c-on-accent);
  font-size: 0.58rem; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ts .jdetails {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.55em 0.95em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .jdetails:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }
@media (max-width: 1400px) { .ts .cabinet-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .ts .cabinet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .ts .cabinet-grid { grid-template-columns: 1fr; } }

.ts .pagin { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; }
.ts .pagin__btn, .ts .pagin__num { min-width: 40px; height: 40px; padding: 0 0.9em; border-radius: 10px; border: 1px solid var(--c-line-strong); color: var(--c-text); font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.ts .pagin__btn:hover:not([disabled]), .ts .pagin__num:hover { border-color: var(--c-blush); color: var(--c-blush); }
.ts .pagin__num.is-active { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
.ts .pagin__btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ============================================================
   VOTE AUTH GATE
   ============================================================ */
.ts .authgate {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: radial-gradient(90% 160% at 0% 0%, var(--c-gold-wash-3), transparent 60%), var(--c-panel-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ts .authgate__text .u-eyebrow { margin-bottom: 0.7rem; }
.ts .authgate__title { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.1; margin-bottom: 0.6rem; }
.ts .authgate__text p { color: var(--c-muted); line-height: 1.65; max-width: 56ch; }
.ts .authgate__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 620px) { .ts .authgate__actions { width: 100%; } .ts .authgate__actions .btn { flex: 1; justify-content: center; } }

/* ============================================================
   STAGES — competition timeline
   ============================================================ */
.ts .stage-progress { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ts .stage-progress__step { flex: 1; min-width: 90px; border-top: 3px solid var(--c-line); padding-top: 0.7rem; }
.ts .stage-progress__step.is-done { border-color: var(--c-blush); }
.ts .stage-progress__step.is-active { border-color: var(--c-blush-light); }
.ts .stage-progress__num { font-family: var(--ff-display); font-weight: 800; font-size: 0.8rem; color: var(--c-faint); }
.ts .stage-progress__step.is-done .stage-progress__num, .ts .stage-progress__step.is-active .stage-progress__num { color: var(--c-blush); }
.ts .stage-progress__label { font-size: 0.76rem; color: var(--c-muted); margin-top: 0.2rem; }

/* public.css's own .timeline is a 3-col grid (different component); its gap
   and align-items still apply to a flex container — reset to the mockup's
   defaults (spacing between items comes from the items themselves). */
.ts .timeline { display: flex; flex-direction: column; gap: normal; align-items: normal; grid-template-columns: none; }
.ts .tl-item { display: grid; grid-template-columns: 56px 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }
.ts .tl-rail { position: relative; display: flex; justify-content: center; }
.ts .tl-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--c-line); }
.ts .tl-item:last-child .tl-rail::before { bottom: calc(100% - 52px); }
.ts .tl-item.is-done .tl-rail::before { background: var(--c-line-strong); }
.ts .tl-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-weight: 800; font-size: 1rem; border: 1px solid var(--c-line-strong); background: var(--c-bg); color: var(--c-muted); }
.ts .tl-item.is-done .tl-node { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
.ts .tl-item.is-active .tl-node { color: var(--c-blush); border-color: var(--c-blush); box-shadow: 0 0 0 4px rgba(205, 164, 95, 0.15); }
.ts .tl-card { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel); padding: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.ts .tl-item.is-active .tl-card { border-color: var(--c-line-strong); }
.ts .tl-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.ts .tl-status { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35em 0.8em; border-radius: 100px; border: 1px solid var(--c-line-strong); color: var(--c-muted); }
.ts .tl-item.is-done .tl-status { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
.ts .tl-item.is-active .tl-status { color: var(--c-blush); border-color: var(--c-blush); }
.ts .tl-item.is-active .tl-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-error); margin-right: 0.5em; vertical-align: middle; }
.ts .tl-date { color: var(--c-faint); font-size: 0.8rem; }
.ts .tl-title { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.55rem); margin-bottom: 0.6rem; line-height: 1.1; }
.ts .tl-desc { color: var(--c-muted); line-height: 1.7; }
.ts .tl-locs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.ts .tl-loc { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; font-weight: 600; color: var(--c-text); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.4em 0.85em; }
.ts .tl-loc svg { color: var(--c-blush); flex: 0 0 auto; }
.ts .tl-stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; margin-top: 1.2rem; }
.ts .tl-stats b { font-family: var(--ff-display); font-weight: 800; color: var(--c-blush); font-size: 1.35rem; display: block; line-height: 1; }
.ts .tl-stats span { color: var(--c-muted); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 560px) { .ts .tl-item { grid-template-columns: 40px 1fr; gap: 0.8rem; } .ts .tl-node { width: 40px; height: 40px; font-size: 0.85rem; } .ts .tl-item:last-child .tl-rail::before { bottom: calc(100% - 40px); } }

/* ============================================================
   FOOTER — owned by the site-wide footer component (public.css).
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .ts .grid-people { grid-template-columns: repeat(3, 1fr); }
  .ts .partners { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1000px) {
  .ts .profile__grid { grid-template-columns: 1fr; }
  .ts .profile__media { position: static; max-width: 420px; }
  .ts .rules__layout { grid-template-columns: 1fr; }
  .ts .rules__toc { position: static; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .ts .rules__toc-title { margin-bottom: 0; }
  .ts .rules__toc-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  .ts .rules__toc a { border-left: none; border: 1px solid var(--c-line); border-radius: 100px; padding: 0.5em 1em; white-space: nowrap; }
  .ts .rules__toc a.is-active { background: var(--c-gold-wash-2); border-color: var(--c-blush); }
}

@media (max-width: 860px) {
  .ts .cats { grid-template-columns: repeat(2, 1fr); }
  .ts .steps { grid-template-columns: repeat(2, 1fr); }
  .ts .grid-people, .ts .grid-people--3 { grid-template-columns: repeat(2, 1fr); }
  .ts .partners { grid-template-columns: repeat(3, 1fr); }
  .ts .fgrid { grid-template-columns: 1fr; }
  .ts .live__row { grid-template-columns: 1.6rem 1fr auto; }
  .ts .live__bar { display: none; }
}

@media (max-width: 560px) {
  .ts .countdown { grid-template-columns: repeat(2, 1fr); }
  .ts .cats { grid-template-columns: 1fr; }
  .ts .grid-people, .ts .grid-people--3 { grid-template-columns: 1fr; }
  .ts .partners { grid-template-columns: repeat(2, 1fr); }
  .ts .hero__cta { flex-direction: column; align-items: stretch; }
  .ts .hero__cta .btn { justify-content: center; }
}

/* ============================================================
   MOBILE SCROLL SLIDERS (JS scroll-snap, one card per view, dots below)
   ============================================================ */
.ts .ts-slider {
  display: flex; grid-template-columns: none;
  gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 6px 10px;
  min-width: 0; max-width: 100%;
}
.ts .ts-slider::-webkit-scrollbar { display: none; }
.ts .ts-slider > * {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
}
/* peek variant: an exact number of full cards per view (no cut cards) */
.ts .ts-slider--peek > * { flex-basis: calc((100% - 2 * 16px) / 3); width: auto; }
@media (max-width: 900px) { .ts .ts-slider--peek > * { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 600px) { .ts .ts-slider--peek > * { flex-basis: 100%; } }

/* Experience blocks: part of the show section — full-width text + photo scroll-slider */
/* Show intro as a photo + text feature row */
.ts .aboutfeature .jfeature__text { display: flex; flex-direction: column; gap: 1.1rem; }
.ts .aboutfeature .jfeature__text .section__title { font-size: clamp(1.75rem, 3.1vw, 2.7rem); margin-bottom: 0.2rem; }
.ts .aboutfeature .jfeature__text p { max-width: none; }
.ts .aboutfeature .applydates { margin-top: 0.3rem; display: flex; flex-wrap: nowrap; gap: 0.6rem 2.4rem; }
@media (max-width: 560px) {
  .ts .aboutfeature .applydates { gap: 0.4rem 1.1rem; }
  .ts .aboutfeature .applydates__v { font-size: clamp(1rem, 4.6vw, 1.3rem); white-space: nowrap; }
  .ts .aboutfeature .applydates__k { font-size: 0.62rem; }
}
.ts .aboutfeature .applydates__v { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.ts .aboutfeature__cta { align-self: flex-start; margin-top: 0.1rem; }
.ts .aboutfeature__photo img { aspect-ratio: 4 / 3; }
.ts .aboutfeature__wrap { margin-top: clamp(2.6rem, 5.5vw, 4.5rem); }

.ts .expwrap { display: grid; gap: clamp(2.6rem, 5.5vw, 4.5rem); margin-top: clamp(2.6rem, 5.5vw, 4.5rem); }
.ts .expblock { display: grid; gap: clamp(1.4rem, 2.8vw, 2rem); }
.ts .expblock__text .section__title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-top: 0.5rem; margin-bottom: 0.8rem; }
.ts .expblock__text p { max-width: none; color: var(--c-muted); }
.ts .photorow { margin: 0; }
.ts .photoslide { margin: 0; }
.ts .photoslide img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); display: block;
}

.ts .ts-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-top: 1.6rem;
}
.ts .ts-dots__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--c-line-strong);
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), width .35s var(--ease);
}
.ts .ts-dots__dot.is-active {
  width: 24px; border-radius: 4px;
  background: var(--c-blush);
}

/* slider prev/next arrow buttons */
.ts .ts-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 1.6rem; }
.ts .ts-nav__btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line-strong); color: var(--c-text);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.ts .ts-nav__btn:hover:not(:disabled) { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: transparent; }
.ts .ts-nav__btn:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   MOBILE: sub-nav scroll hint + compact CTA band
   ============================================================ */
@media (max-width: 640px) {
  /* horizontal-scroll cue: a sticky chevron pinned to the right edge */
  .ts .subnav__list, .ts .filters__row { position: relative; scroll-behavior: smooth; }
  .ts .scroll-cue {
    position: sticky; right: 0; flex: 0 0 auto; align-self: stretch;
    display: inline-flex; align-items: center; justify-content: flex-end;
    width: 52px; margin-left: -52px; padding-right: 4px;
    color: var(--c-blush); pointer-events: auto; cursor: pointer;
    background: linear-gradient(to right, transparent 0%, var(--c-bg) 35%, var(--c-bg) 100%);
    transition: opacity .3s var(--ease);
  }
  /* sub-nav sits on a frosted glass bar — blend the cue into it instead of a solid block */
  .ts .subnav__list .scroll-cue {
    background: linear-gradient(to right, transparent 0%, var(--c-bar) 45%, var(--c-bar) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
  .ts .scroll-cue.is-end { opacity: 0; pointer-events: none; }

  /* tighter bottom spacing on mobile */
  .ts { --block-pad: 44px; }

  /* tighter gap between section heading and content on mobile */
  .ts .section__head { margin-bottom: 1rem; }

  /* on-this-page / sections nav: one clean scrollable row */
  .ts .rules__toc { min-width: 0; max-width: 100%; }
  .ts .rules__toc-list {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    align-self: stretch; width: 100%; min-width: 0; max-width: 100%;
    scroll-behavior: smooth;
  }
  .ts .rules__toc-list::-webkit-scrollbar { display: none; }
  .ts .rules__toc-list a { flex: 0 0 auto; white-space: nowrap; }

  /* smaller placeholder flag tags */
  .ts .rules__flag { font-size: 0.58rem; letter-spacing: 0.08em; padding: 0.3em 0.7em; }

  /* form option pills: clean full-width stack, easy to tap */
  .ts .optset { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .ts .optset .opt { display: block; }
  .ts .optset .opt__box {
    display: flex; width: 100%; justify-content: flex-start;
    border-radius: 12px; padding: 0.85em 1.1em; font-size: 0.9rem;
  }
  .ts .optset .opt input:checked + .opt__box { font-weight: 600; }

  /* filters: search full-width; chips scroll in one row with the count beside it */
  .ts .filters { flex-wrap: wrap; align-items: center; gap: 0.9rem 0.8rem; }
  .ts .filters .search { flex: 1 1 100%; width: 100%; }
  .ts .filters__row {
    flex: 1 1 0; min-width: 0;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
  }
  .ts .filters__row::-webkit-scrollbar { display: none; }
  .ts .filters__row .chip { flex: 0 0 auto; }
  .ts .filters__count { flex: 0 0 auto; }

  /* CTA band: shorter card, smaller buttons, two-in-a-row */
  .ts .ctaband { padding: clamp(2.2rem, 8vw, 2.8rem) 1.25rem; }
  .ts .ctaband__lead { margin: 1rem auto 1.6rem; }
  .ts .ctaband__actions { flex-wrap: nowrap; gap: 0.7rem; }
  .ts .ctaband__actions .btn--lg { padding: 0.85em 1.1em; font-size: 0.78rem; flex: 1 1 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  body::after, .ts .hero__scroll span::after, .ts .live__dot { animation: none; }
  .ts * { scroll-behavior: auto; }
}

/* ============================================================
   PARTICIPANT POPUP (jury review)
   ============================================================ */
.ts .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ts .jpop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: clamp(0.8rem, 3vw, 2rem); }
.ts .jpop[hidden] { display: none; }
.ts .jpop__backdrop { position: absolute; inset: 0; background: rgba(6, 5, 7, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.ts .jpop__dialog {
  position: relative; z-index: 2;
  width: min(1060px, 100%); max-height: min(92vh, 900px);
  display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.3rem);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  background: var(--c-surface-2);
  box-shadow: 0 40px 90px -30px var(--c-shadow);
  overflow-y: auto;
}
.ts .jpop__close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-muted); border: 1px solid var(--c-line);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .jpop__close:hover { color: var(--c-blush); border-color: var(--c-line-strong); background: var(--c-gold-wash); }

/* participant navigation lives outside the dialog */
.ts .jpop__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text); border: 1px solid var(--c-line-strong); background: var(--c-panel-2);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .jpop__nav:hover { color: var(--c-blush); border-color: var(--c-blush); }
.ts .jpop__nav--prev { left: clamp(0.4rem, 2vw, 1.6rem); }
.ts .jpop__nav--next { right: clamp(0.4rem, 2vw, 1.6rem); }
@media (max-width: 1180px) { .ts .jpop__nav { display: none; } }

/* top: photo + facts */
.ts .jpop__top { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); padding-right: 2.6rem; }
.ts .jpop__photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface); aspect-ratio: 3 / 4; }
.ts .jpop__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts .jpop__name { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
.ts .jpop__meta { margin-top: 0.5rem; color: var(--c-muted); font-size: 0.92rem; }
.ts .jpop__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.ts .jpop__fact { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.4em 0.85em; }
.ts .jpop__fact b { color: var(--c-blush); font-weight: 700; }
.ts .jpop__bio { margin-top: 1rem; color: var(--c-muted); line-height: 1.7; font-size: 0.95rem; }
@media (max-width: 760px) { .ts .jpop__top { grid-template-columns: 1fr; } .ts .jpop__photo { max-width: 240px; } }

/* bar: tabs left, scoring right */
.ts .jpop__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 0.85rem 0; }
.ts .jpop__tabs { display: flex; gap: 0.5rem; }
.ts .jtabbtn {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.6em 1.1em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .jtabbtn:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.ts .jtabbtn.is-active { color: var(--c-on-accent); background: var(--c-accent-fill); border-color: var(--c-accent-fill); }

.ts .jpop__vote { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ts .ynswitch { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.2rem; }
.ts .ynswitch__opt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-muted); border-radius: 100px; padding: 0.5em 1em;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.ts .ynswitch__opt.is-active { color: var(--c-on-accent); background: var(--c-accent-fill); }
.ts .jpop__score .field__select { padding: 0.6em 2.2em 0.6em 1em; border-radius: 100px; font-size: 0.82rem; }
.ts .jpop__submit { padding: 0.85em 3.2em; font-size: 0.82rem; min-width: 170px; justify-content: center; }

/* panels swap at a fixed height, so the dialog never jumps */
.ts .jpop__panels { position: relative; }
.ts .jpop__panel { display: none; }
.ts .jpop__panel.is-active { display: block; }

/* video slider */
.ts .vslider { position: relative; }
.ts .vslider__stage { border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); background: #000; aspect-ratio: 16 / 9; }
.ts .vslider__stage iframe, .ts .vslider__stage video { width: 100%; height: 100%; display: block; border: 0; object-fit: contain; background: #000; }
.ts .vslider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text); border: 1px solid var(--c-line-strong); background: rgba(6, 5, 7, 0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ts .vslider__arrow:hover { color: var(--c-blush); border-color: var(--c-blush); }
.ts .vslider__missing { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;
  color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; padding: 1rem; }
.ts .vslider__arrow--prev { left: 0.7rem; }
.ts .vslider__arrow--next { right: 0.7rem; }
.ts .vslider.is-single .vslider__arrow, .ts .vslider.is-single .vslider__dots { display: none; }
.ts .vslider__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.7rem; }
.ts .vslider__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-strong); transition: background .25s var(--ease), transform .25s var(--ease); }
.ts .vslider__dot.is-active { background: var(--c-accent-fill); transform: scale(1.25); }

/* comments — same height as the video stage, newest at the bottom */
.ts .jcomments {
  list-style: none; margin: 0;
  /* grows with the number of comments, never taller than the video stage
     (--stage-h is measured and set by the popup script) */
  max-height: var(--stage-h, 380px);
  overflow-y: auto;
  /* default chaining on purpose: once the list hits its end the wheel carries on
     into the dialog. The page behind cannot move — body is locked while open. */
  overscroll-behavior: auto;
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(0.8rem, 1.6vw, 1.1rem);
  border: 1px solid var(--c-line); border-radius: 14px;
  background: var(--c-bg-deep);
  scrollbar-width: thin;
}
.ts .jcomment { border: 1px solid var(--c-line); border-radius: 12px; padding: 0.8rem 0.95rem; background: var(--c-surface-2); }
.ts .jcomment--own { border-color: var(--c-line-strong); background: var(--c-gold-wash); }
.ts .jcomment__head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.ts .jcomment__who { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.ts .jcomment--own .jcomment__who { color: var(--c-blush); }
.ts .jcomment__when { color: var(--c-faint); font-size: 0.72rem; }
.ts .jcomment__tools { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.ts .jcomment__tool { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); border: 1px solid var(--c-line); transition: color .25s var(--ease), border-color .25s var(--ease); }
.ts .jcomment__tool:hover { color: var(--c-blush); border-color: var(--c-line-strong); }
.ts .jcomment__text { color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; }
.ts .jcomments__empty { color: var(--c-faint); font-size: 0.88rem; padding: 0.6rem 0.2rem; }

/* the input row is one control tall: textarea and Send match exactly */
.ts .jcform { --ctl-h: 48px; display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.9rem; }
.ts .jcform__text { flex: 1; height: var(--ctl-h); min-height: var(--ctl-h); padding: 0.8em 1em; line-height: 1.35; resize: vertical; }
.ts .jcform__actions { display: flex; align-items: stretch; gap: 0.4rem; height: var(--ctl-h); }
.ts .jcform__cancel { font-size: 0.72rem; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.5em 1em; transition: color .25s var(--ease), border-color .25s var(--ease); }
.ts .jcform__cancel:hover { color: var(--c-blush); border-color: var(--c-line-strong); }
.ts .jcform__send { padding: 0 1.6em; font-size: 0.78rem; height: 100%; }
.ts .jcform__cancel { height: 100%; }
@media (max-width: 560px) { .ts .jcform { flex-direction: column; } .ts .jcform__actions { flex-direction: row; width: 100%; } .ts .jcform__send { flex: 1; justify-content: center; } }

/* ----------  News article body: rich text (headings, lists, figures, people)  ---------- */
.ts .article__body .article__lead { color: var(--c-text); font-size: clamp(1.12rem, 1.45vw, 1.32rem); line-height: 1.75; }
.ts .article__body h2 { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.12; color: var(--c-text); margin: clamp(2.2rem, 4vw, 3rem) 0 1rem; }
.ts .article__body h3 { font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--c-text); margin: 1.6rem 0 0.5rem; }
.ts .article__body h3 + p { margin-top: 0; }
.ts .article__body ul, .ts .article__body ol { margin: 0 0 1.4rem; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.ts .article__body ul { list-style: disc; }
.ts .article__body ol { list-style: decimal; }
.ts .article__body li { color: var(--c-muted); line-height: 1.75; font-size: clamp(1rem, 1.15vw, 1.1rem); padding-left: 0.2rem; }
.ts .article__body li::marker { color: var(--c-blush); font-weight: 700; }
.ts .article__body strong { color: var(--c-text); font-weight: 700; }
.ts .article__body a:not(.btn):not(.article__person) { color: var(--c-blush); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s var(--ease); }
.ts .article__body a:not(.btn):not(.article__person):hover { color: var(--c-text); }
.ts .article__figure { margin: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.ts .article__figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); }
.ts .article__figure figcaption, .ts .article__body .article__caption { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.6; color: var(--c-faint); }
.ts .article__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 1.2vw, 0.9rem); margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; }
.ts .article__gallery figure { margin: 0; }
.ts .article__gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(var(--radius) * 0.7); border: 1px solid var(--c-line); }
.ts .article__people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.6vw, 1.1rem); margin: 1.4rem 0 1.6rem; }
.ts .article__person { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.4rem; color: inherit; text-decoration: none; }
.ts .article__person img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: calc(var(--radius) * 0.7); border: 1px solid var(--c-line); margin-bottom: 0.5rem; transition: border-color .3s var(--ease); }
.ts .article__person:hover img { border-color: var(--c-blush); }
.ts .article__person b { font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; font-size: clamp(0.92rem, 1.3vw, 1.08rem); line-height: 1.1; color: var(--c-text); }
.ts .article__person span { font-size: 0.86rem; line-height: 1.55; color: var(--c-muted); }
.ts .article__note { margin: 1.6rem 0; padding: 1.1rem 1.3rem; border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-blush); border-radius: 12px; background: var(--c-panel); }
.ts .article__body .article__note p { margin: 0; color: var(--c-text); font-size: 1rem; line-height: 1.7; }
.ts .article__cta { margin-top: clamp(2.4rem, 4.5vw, 3.2rem); padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.ts .article__body .article__cta p { margin: 0; flex: 1 1 320px; color: var(--c-muted); }
@media (max-width: 640px) {
  .ts .article__gallery { grid-template-columns: repeat(2, 1fr); }
  .ts .article__gallery figure:last-child { display: none; }
  .ts .article__people { grid-template-columns: 1fr; }
  .ts .article__person { display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: start; }
  .ts .article__person img { grid-row: span 2; margin: 0; }
}
/* News pagination renders links, not buttons: a disabled Prev/Next is a span */
.ts .pagin__btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* ----------  Contestants: "casting in progress" teaser (no contestants yet)  ----------
   Four ghost cards in the contestant-card shape — silhouettes under the card
   gradient, not links — fading out under a panel that sends people to apply. */
.ts .castcall { position: relative; margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.ts .castcall__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); pointer-events: none; user-select: none; }
.ts .ghostcard { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-panel); }
.ts .ghostcard__media { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(180deg, rgba(205,164,95,0.10), rgba(205,164,95,0.02) 60%); }
.ts .ghostcard__media svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c-text); opacity: 0.13; }
.ts .ghostcard__scrim { position: absolute; inset: -1px; background: linear-gradient(to top, var(--c-bg) 0%, transparent 60%); opacity: 0.85; }
.ts .ghostcard__tag { position: absolute; top: 0.9rem; left: 0.9rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); border: 1px solid var(--c-line-strong); border-radius: 100px; padding: 0.35em 0.75em; }
.ts .ghostcard__body { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.3rem; display: grid; gap: 0.55rem; }
.ts .ghostcard__bar { display: block; height: 0.85rem; border-radius: 100px; background: var(--c-text); opacity: 0.14; }
.ts .ghostcard__bar--thin { height: 0.55rem; opacity: 0.09; }
.ts .castcall__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 3rem) clamp(5rem, 15vw, 15rem);
  background: linear-gradient(90deg, transparent 0%, var(--c-bg) 42%, var(--c-bg) 100%);
}
.ts .castcall__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.05; max-width: 16ch; }
.ts .castcall__text { color: var(--c-muted); line-height: 1.7; max-width: 46ch; }
.ts .castcall__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
@media (max-width: 900px) {
  .ts .castcall__cards { grid-template-columns: repeat(3, 1fr); }
  .ts .castcall__cards .ghostcard:nth-child(4) { display: none; }
  .ts .castcall__panel { width: 80%; padding-left: clamp(3rem, 12vw, 8rem); }
}
@media (max-width: 640px) {
  .ts .castcall__cards { grid-template-columns: repeat(2, 1fr); }
  .ts .castcall__cards .ghostcard:nth-child(n+3) { display: none; }
  .ts .castcall__panel { position: relative; width: auto; margin-top: -40%; padding: 3.5rem 0 0; background: linear-gradient(180deg, transparent 0%, var(--c-bg) 22%); }
}
/* .field is display:flex, which beats the [hidden] attribute — e.g. the
   US-only State field on the Apply form. */
.ts .field[hidden] { display: none; }
/* A sub-group inside a form section (e.g. "Social media" in Participant) */
.ts .formsec__subhead { margin-top: 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); }
.ts .formsec__subtitle { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: 0.02em; color: var(--c-text); }

/* ----------  Apply form: media upload  ---------- */
.ts .dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 190px; padding: 1.6rem 1.2rem; text-align: center; cursor: pointer;
  border: 1px dashed var(--c-line-strong); border-radius: 16px; background: var(--c-panel);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ts .dropzone:hover, .ts .dropzone:focus-within { border-color: var(--c-blush); background: var(--c-gold-wash, rgba(205,164,95,0.06)); }
.ts .dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ts .dropzone__icon { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-blush); border: 1px solid var(--c-line-strong); background: rgba(205,164,95,0.06); margin-bottom: 0.3rem; }
.ts .dropzone__title { color: var(--c-text); font-weight: 600; font-size: 0.95rem; word-break: break-word; }
.ts .dropzone__hint { color: var(--c-faint); font-size: 0.8rem; }
.ts .dropzone__preview { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-blush); margin-bottom: 0.3rem; }
/* the site-wide img { display: block } beats [hidden] — keep the empty thumbnail out until a photo is picked */
.ts .dropzone__preview[hidden] { display: none; }
.ts .dropzone__preview:not([hidden]) ~ .dropzone__icon, .ts .dropzone:has(.dropzone__preview:not([hidden])) .dropzone__icon { display: none; }
.ts .dropzone.has-file { border-style: solid; border-color: var(--c-blush); }
.ts .dropzone__note { margin: 0.6rem 0 0; color: var(--c-faint); font-size: 0.8rem; line-height: 1.5; }
.ts .dropzone__status { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: min(260px, 100%); margin-top: 0.4rem; }
.ts .dropzone__status[hidden] { display: none; }
.ts .dropzone__bar { width: 100%; height: 4px; border-radius: 4px; background: var(--c-line-strong); overflow: hidden; }
.ts .dropzone__bar i { display: block; height: 100%; width: 0; background: var(--c-blush); transition: width 0.3s ease; }
.ts .dropzone__state { color: var(--c-muted, var(--c-faint)); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ts .dropzone.is-uploaded .dropzone__bar { display: none; }
.ts .dropzone.is-uploaded .dropzone__state { color: var(--c-blush); font-weight: 600; }
.ts .field.is-invalid .dropzone { border-color: #e88; }
.ts [data-media] { gap: 0.9rem; }
.ts [data-media-pane][hidden] { display: none; }
.ts .formsec__req { color: var(--c-blush); }
.ts .formsec__example { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem; padding: 0.55em 1em; border-radius: 100px; border: 1px solid var(--c-line-strong); color: var(--c-blush); font-size: 0.82rem; font-weight: 600; transition: background .3s var(--ease), border-color .3s var(--ease); }
.ts .formsec__example:hover { border-color: var(--c-blush); background: var(--c-gold-wash, rgba(205,164,95,0.08)); }

/* Example dialog (video introduction) */
.ts .exmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.ts .exmodal[hidden] { display: none; }
.ts .exmodal__backdrop { position: absolute; inset: 0; background: rgba(6,5,7,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ts .exmodal__dialog { position: relative; width: min(640px, 100%); max-height: 100%; overflow-y: auto; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--radius); border: 1px solid var(--c-line-strong); background: var(--c-bg); }
.ts .exmodal__close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text); border: 1px solid var(--c-line-strong); transition: background .3s var(--ease), color .3s var(--ease); }
.ts .exmodal__close:hover { background: var(--c-accent-fill); color: var(--c-on-accent); border-color: var(--c-blush); }
.ts .exmodal__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.6rem 0 0.9rem; }
.ts .exmodal__text { color: var(--c-muted); line-height: 1.7; }
.ts .exmodal__list { margin: 1rem 0 1.4rem; padding-left: 1.2rem; list-style: disc; display: grid; gap: 0.45rem; }
.ts .exmodal__list li { color: var(--c-text); line-height: 1.6; }
.ts .exmodal__list li::marker { color: var(--c-blush); }
.ts .exmodal__video { border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); }
.ts .exmodal__video .ph { aspect-ratio: 16 / 9; border: none; border-radius: 0; }
.ts .exmodal__video iframe, .ts .exmodal__video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* sub-heading with an action on the right (Video introduction → See an example) */
.ts .formsec__subhead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; flex-wrap: wrap; }
.ts .formsec__subhead--row .formsec__example { margin-top: 0; flex-shrink: 0; }

/* Phone fields (intl-tel-input) in the section's look — follows the theme */
.ts .iti { width: 100%; }
.ts .iti__selected-country-primary { padding: 0 0.35rem 0 0.9rem; }
.ts .iti__arrow { border-top-color: var(--c-muted); }
.ts .iti__arrow--up { border-bottom-color: var(--c-muted); }
.ts .iti__dropdown-content { background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: 12px; color: var(--c-text); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5); }
.ts .iti__search-input { background: var(--c-panel); color: var(--c-text); border: 0; border-bottom: 1px solid var(--c-line); border-radius: 12px 12px 0 0; padding: 0.7em 0.9em; }
.ts .iti__country { color: var(--c-text); }
.ts .iti__country.iti__highlight { background: rgba(205, 164, 95, 0.16); }
.ts .iti__dial-code { color: var(--c-muted); }
.ts .iti__country-name { color: var(--c-text); }
.ts .iti__search-input { width: 100%; box-sizing: border-box; font-size: 0.9rem; outline: none; }
.ts .iti__search-input:focus { outline: none; border-bottom-color: var(--c-blush); box-shadow: none; }
.ts .iti__search-input::placeholder { color: var(--c-faint); }
.ts .iti__search-input { padding: 0.75em 1em !important; }
.ts .iti__selected-dial-code { color: var(--c-text); font-size: 0.95rem; margin-left: 0.15rem; }

/* ----------  Apply form: waiver  ---------- */
.ts .waiver { gap: 1rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel); }
.ts .waiver__text { color: var(--c-muted); line-height: 1.7; }
.ts .waiver__text b { color: var(--c-text); }
.ts .waiver__unsigned[hidden], .ts .waiver__signed[hidden] { display: none; }
.ts .waiver__signed { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
.ts .waiver__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65em 1.15em; border-radius: 100px; background: rgba(110, 190, 120, 0.14); border: 1px solid rgba(110, 190, 120, 0.45); color: #7fc98a; font-weight: 700; font-size: 0.9rem; }
.ts .waiver__review { color: var(--c-blush); font-size: 0.86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ts .waiver.is-invalid { border-color: #e88; }

/* the dialog: scrolling clauses, "I agree" pinned at the bottom */
.ts .exmodal--wide .exmodal__dialog { width: min(820px, 100%); }
.ts .waiverdlg { display: flex; flex-direction: column; max-height: calc(100vh - 2 * clamp(1rem, 4vw, 3rem)); max-height: calc(100dvh - 2 * clamp(1rem, 4vw, 3rem)); padding: 0; overflow: hidden; overflow: clip; }   /* clip: not even scrollable by focus — only the body scrolls */
.ts .waiverdlg__body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.6rem, 4vw, 2.4rem); }
.ts .waiverdlg__intro { color: var(--c-text); line-height: 1.7; }
.ts .waiverdlg__rules { margin-top: 0.9rem; font-size: 0.85rem; color: var(--c-muted); }
.ts .waiverdlg__rules a { color: var(--c-blush); text-decoration: underline; text-underline-offset: 3px; }
.ts .waiverdlg__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: wclause; }
.ts .waiverdlg__item { counter-increment: wclause; }
.ts .waiverdlg__check { align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: 14px; transition: border-color .25s var(--ease), background .25s var(--ease); }
.ts .waiverdlg__check:has(input:checked) { border-color: var(--c-blush); background: rgba(205, 164, 95, 0.06); }
.ts .waiverdlg__clause { display: grid; gap: 0.5rem; }
/* clause number leads the first line, so the checkbox lines up with the text */
.ts .waiverdlg__clause > :first-child::before { content: counter(wclause, decimal-leading-zero); margin-right: 0.6em; font-family: var(--ff-display); font-weight: 800; font-size: 0.82em; color: var(--c-blush); }
.ts .waiverdlg__text { color: var(--c-text); font-size: 0.92rem; line-height: 1.65; }
.ts .waiverdlg__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid var(--c-line-strong); background: var(--c-bg); }
.ts .waiverdlg__count { color: var(--c-muted); font-size: 0.85rem; }
.ts .waiverdlg__foot .btn[disabled] { opacity: 0.4; pointer-events: none; }
/* Info note under a form block (e.g. the e-signature notice in the waiver section) */
.ts .formnote { display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 1rem; padding: 0.95rem 1.1rem; border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-blush); border-radius: 12px; background: rgba(205, 164, 95, 0.06); }
.ts .formnote__icon { flex-shrink: 0; color: var(--c-blush); margin-top: 0.1rem; }
.ts .formnote__text { color: var(--c-muted); font-size: 0.88rem; line-height: 1.65; }
.ts .formnote__text b { color: var(--c-text); }

/* ----------  Apply form: payment summary  ---------- */
.ts .paybox { padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-panel); display: grid; gap: 0.9rem; }
.ts .paybox__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ts .paybox__label { color: var(--c-muted); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.ts .paybox__desc { color: var(--c-text); font-weight: 600; }
.ts .paybox__row--total { padding-top: 0.9rem; border-top: 1px solid var(--c-line); font-family: var(--ff-display); font-weight: 800; text-transform: uppercase; }
.ts .paybox__row--total b { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-blush); font-variant-numeric: tabular-nums; }
.ts .paybox__lines { display: grid; gap: 0.55rem; padding-top: 0.9rem; border-top: 1px solid var(--c-line); }
.ts .paybox__line { display: flex; justify-content: space-between; gap: 1rem; color: var(--c-muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.ts .paybox__line[hidden] { display: none; }
.ts .paybox__line > span:last-child { color: var(--c-text); }
.ts .paybox__calc { color: var(--c-faint); margin-left: 0.4rem; }

/* Apply form: upload / submit progress, and the thank-you page actions */
.ts .submitprog { display: grid; gap: 0.5rem; margin-top: 1.2rem; max-width: 520px; }
.ts .submitprog[hidden] { display: none; }
.ts .submitprog__label { color: var(--c-text); font-size: 0.9rem; font-weight: 600; }
.ts .submitprog__track { display: block; height: 6px; border-radius: 100px; background: var(--c-line); overflow: hidden; }
.ts .submitprog__track i { display: block; height: 100%; width: 0; background: var(--c-accent-fill); transition: width .25s var(--ease); }
.ts .form__foot button[disabled] { opacity: 0.6; pointer-events: none; }
.ts .applied__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.ts .applied .formnote { margin: 0 auto; max-width: 560px; }
.ts .militarycheck { padding: 0.95rem 1.1rem; border: 1px solid var(--c-line-strong); border-radius: 12px; background: var(--c-panel); }
.ts .militarycheck:has(input:checked) { border-color: var(--c-blush); background: rgba(205, 164, 95, 0.08); }
.ts .formnote__text[hidden] { display: none; }

/* ---------- Participant page (talent-show/my) ---------- */
.ts .cab__app { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }
.ts .cab-status { --cab-tone: var(--c-blush); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--c-line-strong); border-radius: 18px; background: var(--c-panel); }
.ts .cab-status.is-active { --cab-tone: #4fbf7f; border-color: rgba(79, 191, 127, 0.45); background: rgba(79, 191, 127, 0.07); }
.ts .cab-status__dot { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cab-tone); border: 2px solid var(--cab-tone); }
.ts .cab-status.is-active .cab-status__dot { color: #fff; background: #4fbf7f; box-shadow: 0 0 0 6px rgba(79, 191, 127, 0.15); }
.ts .cab-status__text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 260px; }
.ts .cab-status__text small, .ts .cab-status__id small { color: var(--c-faint); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ts .cab-status__text b { color: var(--cab-tone); font-size: 1.2rem; }
.ts .cab-status__text span { color: var(--c-muted); font-size: 0.9rem; }
.ts .cab-status__id { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.ts .cab-status__id b { font-family: var(--ff-display); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--c-text); }
.ts .cab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ts .cab-card { padding: 1.4rem 1.5rem; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-panel); }
.ts .cab-card__title { margin: 0 0 1rem; font-family: var(--ff-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blush); }
.ts .cab-dl { margin: 0; display: flex; flex-direction: column; }
.ts .cab-dl > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--c-line); }
.ts .cab-dl > div:last-child { border-bottom: 0; }
.ts .cab-dl dt { color: var(--c-faint); font-size: 0.85rem; }
.ts .cab-dl dd { margin: 0; color: var(--c-text); font-size: 0.95rem; word-break: break-word; }
.ts .cab-dl a, .ts .cab-media__link { color: var(--c-blush); }
.ts .cab-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ts .cab-media__item { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.ts .cab-media__item figcaption { color: var(--c-faint); font-size: 0.85rem; }
.ts .cab-media__photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-blush); }
.ts .cab-media__doc { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--c-line-strong); }
.ts .cab-media__video { width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.ts .cab-media__link { word-break: break-all; font-size: 0.95rem; }
.ts .cab-note { align-items: center; flex-wrap: wrap; margin-top: 0; }
.ts .cab-note .formnote__text { flex: 1 1 260px; margin: 0; }
.ts .cab-password { max-width: 640px; }
.ts .cab-password__form { display: flex; flex-direction: column; gap: 1rem; }
.ts .cab-password .field__error { display: block; }
.ts .cab-ok { margin: 0 0 1rem; color: #4fbf7f; font-weight: 600; }
.ts .cab-hint, .ts .cab-empty { margin: 1rem 0 0; color: var(--c-muted); font-size: 0.88rem; }
.ts .cab-empty { margin: 0 0 1rem; font-size: 1rem; }
.ts .cab-logout { margin-top: 1.5rem; }
@media (max-width: 760px) {
  .ts .cab-grid, .ts .cab-media { grid-template-columns: 1fr; }
  .ts .cab-status__id { align-items: flex-start; margin-left: 0; }
  .ts .cab-dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
}
/* message to the participant under the status — bright yellow, text + button */
.ts .cab-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.15rem 1.4rem; border-radius: 18px; background: #f5c542; color: #1b1405; }
.ts .cab-notice__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(27, 20, 5, 0.1); }
.ts .cab-notice__text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 260px; }
.ts .cab-notice__text b { font-size: 1.05rem; }
.ts .cab-notice__text span { font-size: 0.92rem; line-height: 1.5; opacity: 0.85; }
.ts .cab-notice__btn { flex: none; display: inline-flex; align-items: center; padding: 0.8rem 1.4rem; border-radius: 999px; background: #1b1405; color: #f5c542; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ts .cab-notice__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); }

/* ----------  Apply form: merch picker (section 07)  ---------- */
.ts .formsec__opt { font-size: 0.55em; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--c-muted); vertical-align: middle; }
.ts .merchpick__hint { margin-top: -0.6rem; margin-bottom: 1.4rem; }
.ts .merchpick__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.ts .merchpick__track::-webkit-scrollbar { display: none; }
.ts .merchpick__card { flex: 0 0 clamp(200px, 30%, 240px); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-panel); transition: border-color .3s var(--ease); }
.ts .merchpick__card:hover { border-color: var(--c-line-strong); }
.ts .merchpick__media { aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.04); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ts .merchpick__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts .merchpick__body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.ts .merchpick__name { font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--c-text); }
.ts .merchpick__price { color: var(--c-blush); font-weight: 600; font-size: 0.95rem; }
.ts .merchpick__controls { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.ts .merchpick__size { flex: 1; min-width: 0; padding: 0.5em 0.6em; border: 1px solid var(--c-line); border-radius: 10px; background: transparent; color: var(--c-text); font-size: 0.82rem; }
.ts .merchpick__size option { color: #111; }
.ts .merchpick__add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.55em 0.8em; border: 0; border-radius: 100px; background: var(--c-accent-fill); color: var(--c-on-accent); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: filter .25s var(--ease), transform .25s var(--ease); }
.ts .merchpick__add:hover { filter: brightness(1.08); }
.ts .merchpick__add.is-added { transform: scale(0.96); filter: brightness(1.15); }
.ts .merchpick__nav { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }
.ts .merchpick__arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); }
.ts .merchpick__arrow:hover { border-color: var(--c-blush); color: var(--c-blush); }
.ts .merchpick__cart { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: rgba(205, 164, 95, 0.05); }
.ts .merchpick__cart-title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blush); margin-bottom: 0.6rem; }
.ts .merchpick__list { list-style: none; margin: 0; padding: 0; }
.ts .merchpick__item { display: grid; grid-template-columns: 1fr auto 5.5rem auto; align-items: center; gap: 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--c-line); font-size: 0.9rem; color: var(--c-text); }
.ts .merchpick__item:first-child { border-top: 0; }
.ts .merchpick__item-size { color: var(--c-muted); }
.ts .merchpick__item-sum { text-align: right; font-variant-numeric: tabular-nums; }
.ts .merchpick__qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts .merchpick__qty button, .ts .merchpick__rm { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); cursor: pointer; line-height: 1; font-size: 0.95rem; }
.ts .merchpick__rm { border-color: transparent; color: var(--c-muted); }
.ts .merchpick__rm:hover { color: #e2795f; }
.ts .merchpick__total { display: flex; justify-content: space-between; margin-top: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--c-line-strong); color: var(--c-text); }
.ts .merchpick__pickup { margin-top: 0.5rem; font-size: 0.8rem; color: var(--c-muted); }
@media (max-width: 640px) {
  .ts .merchpick__card { flex-basis: 72%; }
  .ts .merchpick__item { grid-template-columns: 1fr auto auto; }
  .ts .merchpick__item-sum { grid-column: 1 / 2; text-align: left; color: var(--c-muted); font-size: 0.82rem; margin-top: -0.4rem; }
}

/* ----------  Home: vertical clips above "The show" — a looping slider  ---------- */
.ts .reels__head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.ts .reels__title { max-width: none; }
.ts .reels__nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.ts .reels__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.ts .reels__arrow:hover { border-color: var(--c-blush); color: var(--c-blush); background: rgba(205, 164, 95, 0.06); }
/* room around the slides so a hovered (scaled) card isn't clipped by the slider */
.ts .reels__swiper { padding: 22px 14px; margin: -22px -14px 0; }
.ts .reels__card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-panel); aspect-ratio: 9 / 16; height: auto; transform: translateZ(0); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.ts .reels__video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 761px) {
  .ts .reels__card:hover { transform: scale(1.05); z-index: 2; border-color: var(--c-line-strong); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75); }
}
.ts .reels__dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 1.2rem; }
.ts .reels__dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; border-radius: 50%; background: var(--c-line-strong); opacity: 1; transition: width .3s var(--ease), background .3s var(--ease); }
.ts .reels__dots .swiper-pagination-bullet-active { width: 24px; border-radius: 4px; background: var(--c-blush); }
@media (max-width: 760px) {
  .ts .reels__arrow { width: 40px; height: 40px; }
  .ts .reels__swiper { margin-right: calc(-1 * var(--gut)); }
}