/* Tempo Line's cinematic kit: Outfit, ink, cream, mint and flat pill controls.
   Brand values come from the game's src/ui/next/tokens.css. Shared character
   pages use the same world; the homepage card opts in independently. */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin-wght-normal.woff2') format('woff2');
}
.tl, .tl-game {
  color-scheme: dark;
  --bg: #071b1d;
  --surface: #0c2629;
  --surface-2: #113237;
  --ink: #fff8ea;
  --ink-dim: #e5d5b5;
  --line: rgb(255 248 234 / .22);
  --accent: #74ddb3;
  --accent-2: #9debc9;
  --link: #c2f3dd;
  --focus: #74ddb3;
  --on-accent: #0c2629;
  --shadow: 0 16px 40px rgb(0 0 0 / .18);
  --radius: 24px;
  --font: Outfit, ui-rounded, system-ui, sans-serif;
  font-family: var(--font);
}
.tl .hero {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.tl .hero::before, .tl .hero::after { display: none; }
.tl .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 4rem; }
.tl .hero-copy { text-shadow: none; }
.tl .hero a { color: var(--ink); }
.tl .hero--tempo { background: var(--bg); }
.tl .hero--tempo .wrap { position: relative; min-height: 680px; align-content: space-between; padding-bottom: 5rem; }
.tl .hero--tempo .hero-copy { max-width: 35rem; }
.tl-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}
.tl .hero--tempo::before {
  display: block;
  inset: 0;
  height: auto;
  opacity: 1;
  clip-path: none;
  background: linear-gradient(90deg, #071b1d 0%, rgb(7 27 29 / .92) 30%, rgb(7 27 29 / .15) 70%), linear-gradient(0deg, #071b1d, transparent 30%, transparent 78%, rgb(7 27 29 / .9));
}
.tl-wordmark { margin: 0 0 1.5rem; line-height: 1; }
.tl-wordmark img { display: block; width: min(100%, 470px); }
.tl .hero--tempo .lede { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.tl .hero-copy > p:not(.lede) { color: var(--ink-dim); }
.tl .btn, .tl-game .btn {
  background: var(--ink);
  color: var(--on-accent);
  box-shadow: 0 8px 24px rgb(7 27 29 / .4);
  font-weight: 700;
  transition: background 120ms ease, transform 120ms ease;
}
.tl .hero a.btn { color: var(--on-accent); }
.tl .btn:hover, .tl-game .btn:hover { background: #fbefd6; filter: none; }
.tl .btn:active, .tl-game .btn:active { transform: scale(.975); }
.tl .btn--ghost, .tl .hero a.btn--ghost, .tl-game .btn--ghost {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.tl .btn--ghost:hover, .tl-game .btn--ghost:hover { background: rgb(255 248 234 / .1); }
.tl .badge, .tl-game .badge { border: 1px solid var(--line); color: var(--ink-dim); }
.tl h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.tl h3 { font-weight: 700; }
.tl .card { box-shadow: none; padding: 1.5rem; }
.tl .card p, .tl .shots figcaption { color: var(--ink-dim); }
.tl .levels li { background: var(--surface); border-radius: 20px; }
.tl .levels .art { border-radius: 12px; }
.tl .credit { border-left-width: 3px; }
.tl .shots img { border-radius: 20px; box-shadow: none; }
.tl .shots { gap: 1.25rem; }
.tl .nav a[aria-current='page'] { text-decoration-color: var(--accent); }
.tl-eyebrow { margin: 0 0 .75rem; color: var(--accent); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tl-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.tl-section-head h2, .tl-section-head p:last-child { margin-bottom: 0; }
.tl-section-head > a { min-height: 44px; display: inline-flex; align-items: center; }
.tl-game { background: var(--surface); color: var(--ink); border-color: var(--line); }
.tl-game .chips li { background: var(--surface-2); }
.cast-preview { padding: 1.5rem; border-radius: 24px; margin-block: 2rem; }
.game .tl-card-wordmark { width: 200px; height: auto; max-width: 100%; border-radius: 0; box-shadow: none; }
.game .tl-card-portrait { display: block; width: 96px; height: 96px; overflow: hidden; border-radius: 22px; background: #18424a; }
.game .tl-card-portrait img { display: block; width: 128%; height: auto; max-width: none; transform: translateX(-11%); border-radius: 0; box-shadow: none; }
@media (min-width: 640px) { .game .tl-card-portrait { width: 128px; height: 128px; border-radius: 28px; } }
.character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.character-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--ink);
  font-family: Outfit, system-ui, sans-serif;
}
.character-poster { display: block; aspect-ratio: 32 / 25; overflow: hidden; background: #00464d; }
.character-poster img { display: block; width: 100%; height: auto; }
.character-poster--portrait { aspect-ratio: 4 / 3; }
.character-poster--portrait img { width: var(--poster-scale, 100%); margin-inline: auto; clip-path: inset(0 0 var(--poster-trim, 25%) 0); }
.character-poster--brio { --poster-scale: 96%; --poster-trim: 21%; }
.character-poster--quill { --poster-scale: 93%; --poster-trim: 20%; }
.character-poster--torque { --poster-scale: 90%; --poster-trim: 17.5%; }
.character-poster--art { aspect-ratio: 4 / 3; }
.character-poster--art img { height: 100%; object-fit: cover; }
.character-card__copy { padding: 1.5rem; }
.character-status { display: inline-block; margin: 0 0 .75rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-size: .8rem; font-weight: 600; line-height: 1.4; }
.character-card h3 { font-size: 2rem; letter-spacing: -.02em; }
.character-card p { color: var(--ink-dim); margin-bottom: 1rem; }
.character-card .btn { padding-inline: 1rem; }
.character-hero .wrap { align-items: center; }
.tl .character-hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-bottom: 3rem; }
.character-hero .nav { grid-column: 1 / -1; }
.character-hero h1 { font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; letter-spacing: -.04em; }
.character-hero .lede { font-size: 1.6rem; font-weight: 500; }
.character-portrait { margin: 0; justify-self: center; width: min(100%, 440px); }
.character-portrait .character-poster { border-radius: 24px; border: 1px solid var(--line); }
.character-portrait figcaption { margin-top: .75rem; color: var(--ink-dim); font-size: .875rem; }
.character-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.character-facts > div { padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.character-facts dt { color: var(--ink-dim); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.character-facts dd { margin: .5rem 0 0; font-size: 1.15rem; font-weight: 700; }
.character-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.character-gallery figure { margin: 0; }
.character-gallery img { display: block; width: 100%; border-radius: 20px; background: var(--surface); }
.character-gallery figcaption { color: var(--ink-dim); margin-top: .75rem; }
.character-gallery--game { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.character-gallery .character-model img { aspect-ratio: 1; object-fit: contain; padding: 1rem; }
.character-turnaround { margin: 1.5rem 0 0; }
.character-turnaround img { width: 100%; height: auto; display: block; border-radius: 20px; }
.character-turnaround figcaption { margin-top: .75rem; color: var(--ink-dim); }
.character-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 899px) {
  .character-grid { grid-template-columns: 1fr; }
  .tl .hero--tempo .wrap { min-height: 760px; padding-bottom: 3rem; }
  .tl-hero-art { object-position: 28% 50%; }
  .tl .hero--tempo::before { background: linear-gradient(0deg, #071b1d 0%, rgb(7 27 29 / .93) 33%, rgb(7 27 29 / .12) 65%, rgb(7 27 29 / .7) 100%); }
  .tl .hero--tempo .hero-copy { align-self: end; }
  .tl-wordmark img { width: min(100%, 340px); }
}
@media (max-width: 639px) {
  .tl .character-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .character-portrait { grid-row: 2; width: min(100%, 340px); }
  .character-hero .hero-copy { grid-row: 3; }
  .character-facts, .character-gallery { grid-template-columns: 1fr; }
  .character-card__copy { padding: 1.25rem; }
  .character-card h3 { font-size: 1.7rem; }
  .character-card p { font-size: 1rem; }
  .game .tl-card-wordmark { width: 165px; }
  .tl .hero--tempo .wrap { min-height: 820px; }
  .tl-hero-art { object-position: center 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .tl .btn, .tl-game .btn { transition: none; }
  .tl .btn:active, .tl-game .btn:active { transform: none; }
}