:root {
  --c-pink: #e5307d;
  --c-pink-light: #f7b2d0;
  --c-wash: #fff7fb;
  --c-cyan: #79d7f3;
  --c-pink-2: #fa94c1;
  --c-body: #575757;
  --c-muted: #888888;
  --c-border: #e2e2e2;
  --c-dash: #a2a2a2;
  --nav-h: 72px;
}

* {
  box-sizing: border-box;
}

/* [hidden] only lives in the UA stylesheet, so ANY class that sets `display`
 * beats it on specificity and the attribute silently stops working. That has
 * caught this codebase four times now (the twibbon tool blocks, the kana decks,
 * rounds and daily prize, the charavote staff badge, the kana account row), each
 * time patched one class at a time. Stated once here for the whole site instead,
 * so `hidden` means hidden and a new component cannot reintroduce it. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* Readable by screen readers and search engines, invisible on screen.
   Deliberately not display:none or visibility:hidden - both of those take the
   text out of the accessibility tree, and a heading nobody can read is not a
   heading. This is the standard clip technique instead. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  color: var(--c-body);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  color: #2b2b2b;
  margin: 0;
}

p {
  margin: 0;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
  max-width: 100%;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: 700;
  padding: 0 0.15em;
}

.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}

.c-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-pink);
  margin-bottom: 0.75rem;
}

.c-eyebrow--white {
  color: #ffffff;
}

@keyframes bg_loop {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes splash_rise {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes ecg_draw {
  0%   { stroke-dashoffset: 200; }
  65%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.l-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: var(--c-wash);
  transition: opacity 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.l-splash.is-done {
  opacity: 0;
  pointer-events: none;
}

.l-splash__mark {
  width: 220px;
  opacity: 0;
  animation: splash_rise 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.l-splash__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.l-splash__ecg {
  width: 200px;
  height: 24px;
  opacity: 0;
  animation: splash_rise 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s forwards;
}

.l-splash__ecg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.l-splash__ecg-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: ecg_draw 2.6s linear 1s infinite;
}

.c-btn {
  position: relative;
  display: inline-block;
}

/* .c-btn was built for <a> - all its actual pill styling (background,
   padding, radius) lives on the inner .c-btn__link, so an <a> with no
   native chrome of its own just shows that pill cleanly. A <button> has
   its own default border/background/padding/font on top of that, which is
   the grey box that shows up around the pill whenever .c-btn lands on one
   (kana/advanced/gate.js's logout control was the one that surfaced this).
   Reset once here, generically, rather than per element every time this
   class ends up on a <button>. */
button.c-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.c-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.15rem;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  pointer-events: none;
}

.c-btn--white::before {
  border-color: var(--c-pink);
}

.c-btn__link {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--c-pink);
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  padding: 1rem 3rem 1rem 1.75rem;
}

.c-btn--small .c-btn__link {
  padding: 0.6rem 2.1rem 0.6rem 1.2rem;
  font-size: 0.85rem;
}

.c-btn--large .c-btn__link {
  font-size: 1.05rem;
  padding: 1.15rem 3.5rem 1.15rem 2.2rem;
}

.c-btn--gradient .c-btn__link {
  background-image: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-pink-2) 100%);
}

.c-btn--white .c-btn__link {
  background-color: #ffffff;
  color: var(--c-pink);
}

.c-btn__link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 100%;
  background-color: #000000;
  transition: width 0.4s cubic-bezier(0.87, 0, 0.13, 1);
}

.c-btn__link:hover::before {
  width: 100%;
  transition: width 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}

.c-btn__link-text {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-border);
}

/* Three columns rather than an absolutely centred wordmark. The two outer
 * columns share whatever is left over equally, so the logo sits dead centre
 * on wide screens and - because grid columns cannot overlap - the burger and
 * the Discord button still cannot collide on a narrow phone. */
.l-header__inner {
  position: relative;
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.c-wordmark {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-self: center;
}

.c-wordmark__logo {
  display: block;
  height: 40px;
  width: auto;
}

.l-header .c-btn--small {
  grid-column: 3;
  justify-self: end;
}

/* ============================================================
   Menu
   ============================================================ */

/* The burger is shown at every width on purpose: one menu that behaves the
 * same everywhere beats a desktop bar that turns into something else below a
 * breakpoint. Its contents are built in nav.js so a new page is one line in
 * one file, not an edit to every page's header. */
.c-burger {
  grid-column: 1;
  justify-self: start;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--c-pink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background-color 0.2s ease;
}

.c-burger:hover {
  background-color: var(--c-wash);
}

.c-burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.18s ease;
}

/* Top and bottom bars travel to the middle, then cross. The middle bar just
   fades, so the X is drawn by the two bars that were already there. */
.c-burger[aria-expanded='true'] .c-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.c-burger[aria-expanded='true'] .c-burger__bar:nth-child(2) {
  opacity: 0;
}

.c-burger[aria-expanded='true'] .c-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.c-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 1.5rem;
  z-index: 30;
  width: 264px;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border-radius: 18px;
  border: 1px solid var(--c-border);
  background-color: #ffffff;
  box-shadow: 0 20px 44px -22px rgba(229, 48, 125, 0.45), 0 2px 10px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: 28px top;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1), visibility 0.24s;
}

.c-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.c-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-menu__link {
  position: relative;
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #2b2b2b;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.c-menu__note {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-muted);
  margin-top: 0.15rem;
}

.c-menu__link:hover,
.c-menu__link:focus-visible {
  background-color: var(--c-wash);
  color: var(--c-pink);
}

.c-menu__link:hover .c-menu__note,
.c-menu__link:focus-visible .c-menu__note {
  color: var(--c-pink-2);
}

/* The page you are already on. Marked with a dot rather than a filled row so
   it reads as a position, not as something else to click. */
.c-menu__link[aria-current='page'] {
  color: var(--c-pink);
  background-color: var(--c-wash);
}

/* Absolutely placed rather than floated: the label and the note underneath it
   are separate line boxes, and a float would make the note wrap around the
   dot instead of sitting square under the label. */
.c-menu__link[aria-current='page']::before {
  content: '';
  position: absolute;
  top: 1.05rem;
  right: 0.85rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-pink);
}

.c-menu__sep {
  height: 1px;
  margin: 0.4rem 0.85rem;
  background-color: var(--c-border);
}

/* "Tools" is a real disclosure, open by default: the three pages under it are
   the point of the menu, so nobody should have to click twice to see them. */
.c-menu__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.18s ease;
}

.c-menu__group:hover {
  color: var(--c-pink);
}

.c-menu__caret {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.24s cubic-bezier(0.65, 0, 0.35, 1);
}

.c-menu__group[aria-expanded='true'] .c-menu__caret {
  transform: rotate(90deg);
}

/* Collapsed with the grid 1fr-to-0fr trick so the height animates without a
 * hard-coded max-height that would clip once a fourth tool is added. The
 * wrapper is what collapses; the list inside keeps its own height. */
.c-menu__subwrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.26s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}

.c-menu__group[aria-expanded='false'] + .c-menu__subwrap {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* The guide line makes the indent read as "these belong to Tools" without
   drawing a box around them. */
.c-menu__sub {
  list-style: none;
  min-height: 0;
  overflow: hidden;
  margin: 0 0 0.15rem 1.35rem;
  padding: 0 0 0 0.6rem;
  border-left: 2px solid var(--c-pink-light);
}

.c-menu__sub .c-menu__link {
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
}

/* Room for the current-page dot, kept after the two rules that set padding on
   these links so it is not undone by either of them. */
.c-menu__link[aria-current='page'] {
  padding-right: 1.7rem;
}

.c-menu__sub .c-menu__link[aria-current='page'] {
  padding-right: 1.6rem;
}

.c-menu__sub .c-menu__link[aria-current='page']::before {
  top: 0.8rem;
  right: 0.75rem;
}

.l-hero {
  background-color: var(--c-wash);
  padding-bottom: 4.5rem;
  text-align: center;
}

.l-hero__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 1.5rem 0;
}

.c-slider {
  position: relative;
  width: 100%;
  /* The banners are 1897x803. Matching that ratio exactly shows the art whole
     at every width - no crop, no letterboxing, and no dependence on viewport
     height, which is what made the old calc(100vh - navbar) cut off the tops
     and bottoms. */
  aspect-ratio: 1897 / 803;
  height: auto;
  overflow: hidden;
  background: var(--c-pink-light);
  /* The slider handles horizontal drags itself; let the browser keep vertical
     scrolling so the page can still be scrolled from on top of the banner. */
  touch-action: pan-y;
  user-select: none;
}


.c-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Every slide is stacked at inset:0, and opacity:0 does not stop hit
     testing - without this all fourteen credit links pile up on the same
     spot and whichever slide is last in the DOM eats the click, so the
     visible handle and the link you land on are different artists. */
  pointer-events: none;
}

.c-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.c-slider__slide picture {
  display: block;
  position: absolute;
  inset: 0;
}
.c-slider__slide img {
  display: block;
  /* Without this the browser starts its own image-drag on mousedown, the
     pointerup never reaches the slider, and the swipe silently does nothing. */
  -webkit-user-drag: none;
  user-select: none;
  /* Events pass through to the slider, which is what listens for the swipe.
     The credit link sits above this and keeps its own pointer events. */
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top and centred horizontally: on a screen taller than 16:9
     the crop should eat the bottom of the art, never the characters' heads. */
  object-position: center;
}

/* Only one credit is correct at a time - desktop and mobile show different
   pieces by different artists, so the link has to switch with the image. */
.c-slider__credit--mobile { display: none; }

.c-slider__credit {
  position: absolute;
  /* Above the picture that fills the slide, so the link is actually reachable
     rather than sitting under it. */
  z-index: 3;
  right: 0.9rem;
  bottom: 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  padding: 0.3rem 0.75rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.c-slider__credit:hover,
.c-slider__credit:focus-visible {
  background: rgba(0, 0, 0, 0.62);
}

.c-badge {
  width: 400px;
  margin: 0 auto 1.75rem;
}

.c-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.c-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  /* Above the slides, and above the credit pill it may overlap. */
  z-index: 4;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-pink);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(229, 48, 125, 0.45);
  transform: translateX(-50%);
  animation: scroll_cue_bounce 2.2s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-scroll-cue::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--c-pink);
  animation: scroll_cue_ping 2.2s ease-out infinite;
}

.c-scroll-cue:hover {
  animation-play-state: paused;
  transform: translateX(-50%) scale(1.12);
}

.c-scroll-cue svg {
  width: 24px;
  height: 24px;
}

@keyframes scroll_cue_bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}

@keyframes scroll_cue_ping {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

.c-numbered {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: left;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.c-numbered li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--c-body);
  padding: 0.5rem 0;
}

.c-numbered li + li {
  border-top: none;
  background-image: repeating-linear-gradient(90deg, var(--c-dash), var(--c-dash) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 6px);
  background-position: top;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

.c-numbered__num {
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  color: var(--c-pink);
  font-size: 0.85rem;
}

.l-hero__punch {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 2.25rem;
}

/* Sits between the hero and the about copy. The hero above it is on --c-wash
   and the about below is white, so the card carries the brand gradient to
   keep it from blending into either neighbour. */
.l-hanigatsu {
  background: #ffffff;
  /* The 0 bottom used to be deliberate, back when the next section carried the
     gap. It no longer does, so the event card sat flush against it. */
  padding: 4rem 1.5rem;
}

.l-hanigatsu__inner {
  max-width: 940px;
  margin: 0 auto;
}

.c-event-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-image: linear-gradient(110deg, var(--c-cyan) 0%, var(--c-pink-2) 55%, var(--c-pink) 100%);
  padding: 3.25rem 2.5rem;
  text-align: center;
  box-shadow: 0 22px 45px rgba(229, 48, 125, 0.22);
}

.c-event-card__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.4rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}

.c-event-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  animation: live_pulse 1.8s ease-in-out infinite;
}

@keyframes live_pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.c-event-card__title {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.c-event-card__body {
  margin-bottom: 2.25rem;
}

.c-event-card__text {
  max-width: 620px;
  margin: 0 auto 1.15rem;
  font-size: 1rem;
  color: #fff4f9;
}

.c-event-card__text:last-child {
  margin-bottom: 0;
}

.c-countdown {
  margin-bottom: 2.25rem;
}

.c-countdown__label {
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff4f9;
}

.c-countdown__units {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.c-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.7rem 0.35rem 0.55rem;
  width: 84px;
}

.c-countdown__num {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  /* The digits change every second, so fix their advance width or the whole
     row jitters as the glyphs swap. */
  font-variant-numeric: tabular-nums;
}

.c-countdown__cap {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff4f9;
}

.c-countdown__sep {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  padding-top: 0.7rem;
}

.c-event-card__note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: #fff4f9;
}

.c-event-card__path {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.15rem 0.6rem;
  font-weight: 700;
  color: #ffffff;
}

.l-about {
  background: #ffffff;
  padding: 4.5rem 1.5rem;
}

.l-about__inner {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.l-about__title {
  font-size: 1.9rem;
  margin: 0.6rem 0 1rem;
}

.l-about__lead {
  max-width: 620px;
  margin: 0 auto 2.75rem;
}

/* Three figures, separated by hairlines rather than boxes - keeps the flat
   treatment the rest of the page uses. */
.c-about-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 3.5rem;
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.c-about-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}

.c-about-stat__num {
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-pink);
}

.c-about-stat__label {
  font-size: 0.85rem;
  color: var(--c-muted);
}

.c-about-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  text-align: left;
}

.c-about-card {
  border: 1px solid var(--c-border);
  border-radius: 20px;
  padding: 1.5rem 1.4rem;
  background: #ffffff;
}

.c-about-card__title {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.c-about-card__text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-body);
}

@media (max-width: 640px) {
  .l-about__title { font-size: 1.5rem; }
  .c-about-stats { gap: 1.5rem 2rem; }
  .c-about-stat { min-width: 120px; }
  .c-about-stat__num { font-size: 1.7rem; }
}

.l-about__text {
  font-size: 1.02rem;
}

.l-things {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 1.5rem;
  background: var(--c-wash);
}

.c-marquee {
  position: absolute;
  top: 2rem;
  left: 0;
  width: 100%;
  height: 32px;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}

.c-marquee__track {
  display: flex;
  width: max-content;
  animation: bg_loop 20s linear infinite;
}

.c-marquee__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
}

.c-marquee__track svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.l-things__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

.l-things__title {
  font-size: 1.9rem;
  text-align: center;
  margin-bottom: 3rem;
}

.c-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.c-feature {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
}

.c-feature__num {
  display: block;
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 800;
  color: var(--c-pink-light);
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

.c-feature__title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.c-feature__text {
  font-size: 0.9rem;
  color: var(--c-muted);
  margin-bottom: 1.1rem;
}

.c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.c-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-pink);
  background: var(--c-pink-light);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.l-nobar {
  background: #ffffff;
  padding: 5rem 1.5rem;
  /* The carousel's side cards sit at +/-22% and deliberately bleed past the
     text column. On narrow screens that bleed reached past the viewport and
     gave the whole page a horizontal scrollbar, so it gets clipped at the
     section edge instead. `clip` rather than `hidden`: hidden would turn the
     section into a scroll container (and force overflow-y to auto). */
  overflow-x: hidden;
  overflow-x: clip;
}

.l-nobar__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

.c-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
}

.c-feature-row--reverse {
  flex-direction: row-reverse;
}

.c-feature-row__copy {
  flex: 0 1 360px;
  max-width: 360px;
}

.c-feature-row__shot {
  flex: 0 1 480px;
  display: flex;
  /* Hug the row's OUTER edge, not the middle of the shot box. Centred, the
     images floated in their own column with a gap either side and never
     reached the edge of the section. */
  justify-content: flex-end;
}

/* Reversed rows put the shot on the left, so its outer edge is the left one. */
.c-feature-row--reverse .c-feature-row__shot {
  justify-content: flex-start;
}



.c-panel__title {
  font-size: 1.15rem;
  color: var(--c-pink);
  margin-bottom: 0.75rem;
}

.c-panel__text {
  font-size: 0.94rem;
  color: var(--c-muted);
}


/* ── Screenshot carousel ──────────────────────────────────────────────────
   A 3D card stack: every card fills the stage and is placed by GSAP, so the
   container's size never depends on the cards. Positions live in script.js,
   not here - CSS only has to describe what a card IS, not where it sits. */
.c-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
}

.c-stage:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 6px;
  border-radius: 18px;
}

.c-stage__card {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 5px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
  /* GSAP writes transform and z-index; nothing here should fight it. */
  will-change: transform;
}

.c-stage:hover .c-stage__card {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.c-stage__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

.c-panel__shot--single img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 14px;
  border: 5px solid #ffffff;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.16);
  transform: rotate(-2.5deg);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-panel__shot--single img:hover {
  transform: rotate(0deg) translateY(-6px);
}


/* Horizontal fan on desktop/tablet - cards spread left-to-right with room
   to spare (left 4/22/40% + width 46% tops out at 86%, leaving margin for
   rotate() to bleed into, since rotation is paint-only and never adds to
   the box's own layout width). Mobile switches to a vertical cascade instead
   (see the ≤560px override) since there isn't enough horizontal room there. */




.l-fanart-wall {
  background: var(--c-wash);
  padding: 5.5rem 1.5rem;
}

.l-fanart-wall__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.l-fanart-wall__title {
  font-size: 1.9rem;
  margin-bottom: 3rem;
}

.l-crazy-wall {
  background: #ffffff;
  padding: 5.5rem 1.5rem;
}

.l-crazy-wall__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.l-crazy-wall__title {
  font-size: 1.9rem;
  margin-bottom: 3rem;
}

.c-crazy-carousel {
  max-width: 640px;
  margin: 0 auto;
}

.c-crazy-carousel__stage {
  position: relative;
}

.c-crazy-carousel__slides {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-wash);
}

.c-crazy-carousel__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-crazy-carousel__slide.is-active {
  opacity: 1;
}

.c-crazy-carousel__slide img {
  display: block;
  max-width: 92%;
  max-height: 88%;
  object-fit: contain;
  border-radius: 10px;
}

.c-crazy-carousel__arrow {
  position: absolute;
  top: 50%;
  left: -22px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.c-crazy-carousel__arrow::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-pink);
  border-bottom: 2px solid var(--c-pink);
  transition: border-color 0.3s ease;
}

.c-crazy-carousel__arrow:hover {
  background: var(--c-pink);
}

.c-crazy-carousel__arrow:hover::before {
  border-color: #ffffff;
}

.c-crazy-carousel__arrow--prev::before {
  transform: rotate(135deg);
  margin-left: 4px;
}

.c-crazy-carousel__arrow--next {
  left: auto;
  right: -22px;
}

.c-crazy-carousel__arrow--next::before {
  transform: rotate(-45deg);
  margin-right: 4px;
}

.c-crazy-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.c-crazy-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-border);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-crazy-carousel__dot.is-active {
  background: var(--c-pink);
  transform: scale(1.3);
}

.c-scroll-wall {
  display: flex;
  gap: 15px;
  height: 640px;
  overflow: hidden;
  border-radius: 20px;
  text-align: left;
}

.c-scroll-col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.c-scroll-col__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation-name: scroll_wall_loop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.c-scroll-col__group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 15px;
  padding-bottom: 15px;
}

.c-scroll-col:nth-child(odd) .c-scroll-col__track { animation-direction: normal; }
.c-scroll-col:nth-child(even) .c-scroll-col__track { animation-direction: reverse; }

.c-scroll-col:nth-child(1) .c-scroll-col__track { animation-duration: 38s; }
.c-scroll-col:nth-child(2) .c-scroll-col__track { animation-duration: 44s; }
.c-scroll-col:nth-child(3) .c-scroll-col__track { animation-duration: 40s; }
.c-scroll-col:nth-child(4) .c-scroll-col__track { animation-duration: 46s; }

@keyframes scroll_wall_loop {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.c-scroll-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  flex: none;
}

.c-scroll-item img {
  display: block;
  width: 100%;
  height: auto;
}

.c-scroll-item figcaption {
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

/* The padding lives on the anchor so the whole pill is the click target. */
.c-scroll-item__credit {
  display: block;
  padding: 0.25rem 0.65rem;
  color: #ffffff;
  text-decoration: none;
}

.c-scroll-item figcaption:hover,
.c-scroll-item figcaption:focus-within {
  background: rgba(0, 0, 0, 0.65);
}

.l-cta-band {
  background-image: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-pink-2) 100%);
  padding: 5.5rem 0;
  text-align: center;
}

.l-cta-band__inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  text-align: left;
}

.l-cta-band__copy {
  max-width: 460px;
}

.l-cta-band__title {
  font-size: 1.75rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.l-cta-band__text {
  color: #fff2f6;
  font-size: 0.98rem;
  margin-bottom: 2.25rem;
}

.l-cta-band__hero {
  flex: none;
  width: 230px;
}

.l-cta-band__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  transform: rotate(5deg);
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.25);
}

.c-tcg-slider {
  width: 100%;
  margin-top: 4rem;
  overflow: hidden;
}

.c-tcg-slider__track {
  display: flex;
  width: max-content;
  animation: bg_loop 24s linear infinite;
}

.c-tcg-slider__group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  flex: none;
}

.c-tcg-slider__group img {
  display: block;
  width: 190px;
  height: auto;
  border-radius: 14px;
  flex: none;
}

.l-yume {
  background: var(--c-wash);
  padding: 5rem 1.5rem;
  text-align: center;
}

.l-yume__inner {
  max-width: 580px;
  margin: 0 auto;
}

.l-yume__title {
  font-size: 1.6rem;
  margin-bottom: 1.1rem;
}

.l-yume__text {
  font-size: 0.96rem;
  color: var(--c-muted);
}

.l-footer {
  padding: 2.5rem 1.5rem;
  background: #2b2b2b;
}

.l-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: #cfcfcf;
  font-size: 0.85rem;
}

.l-footer__kaomoji {
  margin-bottom: 0.9rem;
  color: var(--c-pink);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.l-footer__disclaimer {
  margin-top: 0.5rem;
  color: #8f8f8f;
  font-size: 0.78rem;
}

@media (max-width: 860px) {
  .c-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-feature-row,
  .c-feature-row--reverse {
    flex-direction: column;
    text-align: center;
  }

  .c-feature-row__copy,
  .c-feature-row__shot {
    flex: 0 0 auto;
  }

  .c-feature-row__copy {
    max-width: 100%;
  }

  .l-cta-band__inner {
    /* column-reverse: the card leads on mobile. It is the thing that sells the
       TCG, and stacked normally it sat below a paragraph and a button where
       most people never scrolled to it. */
    flex-direction: column-reverse;
    text-align: center;
  }

  .l-cta-band__copy {
    max-width: 100%;
  }

  .l-cta-band__hero {
    width: 200px;
  }

  .c-scroll-wall {
    height: 560px;
  }

  .c-scroll-col:nth-child(4) {
    display: none;
  }

  .c-crazy-carousel__slides {
    height: 340px;
  }
}

@media (max-width: 560px) {
  /* The header is just the burger and the logo on a phone, which leaves both
   * at full size instead of squeezing three things into 320px. The centre
   * column stays centred with the third column empty, so the logo does not
   * shift sideways when the button drops out. */
  .l-header .c-btn--small {
    display: none;
  }

  .l-header__inner {
    padding: 0 1rem;
  }

  .c-menu {
    left: 1rem;
  }

  .l-hero {
    padding-bottom: 3.5rem;
  }

  .l-hero__inner {
    padding: 2.5rem 1.25rem 0;
  }

  .l-hanigatsu {
    padding: 3rem 1.25rem 0;
  }

  .c-event-card {
    border-radius: 18px;
    padding: 2.5rem 1.5rem;
  }

  .c-event-card__title {
    font-size: 1.5rem;
  }

  .c-countdown__unit {
    width: 68px;
    padding: 0.55rem 0.3rem 0.45rem;
  }

  .c-countdown__num {
    font-size: 1.6rem;
  }

  .c-countdown__sep {
    font-size: 1.3rem;
    padding-top: 0.55rem;
  }

  .c-badge {
    width: 260px;
  }

  .c-slider {
    height: 60vh;
  }

  .c-feature-grid {
    grid-template-columns: 1fr;
  }

  .c-btn::before {
    right: 0.85rem;
  }

  .c-scroll-wall {
    height: 460px;
  }

  .c-crazy-carousel__slides {
    height: 260px;
  }

  .c-crazy-carousel__arrow--prev {
    left: 6px;
  }

  .c-crazy-carousel__arrow--next {
    right: 6px;
  }

  .c-scroll-col:nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-splash {
    display: none;
  }

  .c-scroll-cue,
  .c-scroll-cue::before,
  .c-event-card__dot {
    animation: none;
  }
}

.pswp__fanart-caption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

.pswp__fanart-caption a {
  display: block;
  padding: 0.4rem 1rem;
  color: #ffffff;
  text-decoration: none;
}

.pswp__fanart-caption:hover,
.pswp__fanart-caption:focus-within {
  background: rgba(0, 0, 0, 0.78);
}

/* ── Team + social ─────────────────────────────────────────────────────────
   Both follow the l-about pattern: centred, narrow, no card chrome. Avatars
   are local files the bot writes nightly, so nothing here loads from Discord. */

/* Sections carry their own background + padding here, matching .l-about /
   .l-yume / .l-nobar. The page alternates white and wash, and yume above is
   wash, so team is white and social returns to wash. */
.l-team {
  background: #ffffff;
  padding: 5rem 1.5rem;
}

.l-social {
  background: var(--c-wash);
  padding: 5rem 1.5rem;
}

.l-team__inner,
.l-social__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Matches .l-yume__title, the section directly above. Family, weight and
   colour come from the base h1,h2,h3 rule; sections only set size here, and
   none of them use a clamp. */
.l-team__title,
.l-social__title {
  font-size: 1.6rem;
  margin: 0 0 1.75rem;
}

.c-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem 2.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-team-card {
  width: 116px;
}

.c-team-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.75rem;
  /* A pale ring instead of a shadow, matching the flat treatment elsewhere. */
  border: 2px solid var(--c-pink-light);
  background: var(--c-wash);
}

.c-team-card__name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.c-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.c-social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.5rem 0.85rem 1.15rem;
  border: 1px solid var(--c-border);
  border-radius: 100px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-social__link:hover,
.c-social__link:focus-visible {
  border-color: var(--c-pink);
  color: var(--c-pink);
}

.c-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-wash);
  color: var(--c-pink);
  flex-shrink: 0;
}

.c-social__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

.c-social__name {
  font-weight: 700;
  font-size: 0.95rem;
}

.c-social__handle {
  font-size: 0.8rem;
  color: var(--c-muted);
}

@media (max-width: 640px) {
  .c-team-grid { gap: 1.75rem 1.5rem; }
  .c-team-card { width: 92px; }
  .c-team-card__avatar { width: 76px; height: 76px; }
}

/* ── Slider on mobile ──────────────────────────────────────────────────────
   The mobile banners are 1:1, so the section becomes square and the art fits
   edge to edge with no cropping at all. */
@media (max-width: 768px) {
  .c-slider {
    /* The mobile art is 1:1, so a square box shows it whole - no crop at all. */
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .c-slider__slide img { object-fit: cover; }
  .c-slider__slide img {
    object-position: center;
  }
  .c-slider__credit--desktop { display: none; }
  .c-slider__credit--mobile { display: block; }
}

/* ── Mobile overrides for the feature rows ────────────────────────────────
   Declared last on purpose: these tie on specificity with the desktop rules
   above, and a media query does not add any, so source order decides. */
@media (max-width: 860px) {
  /* Stacked on narrow screens: nothing has an outer edge to hug any more. */
  .c-feature-row__shot,
  .c-feature-row--reverse .c-feature-row__shot {
    justify-content: center;
    width: 100%;
  }

  /* Same carousel, just a slightly taller frame on narrow screens. */
  .c-stage {
    max-width: 380px;
    aspect-ratio: 5 / 4;
  }

  /* Keep the whole stack inside the stage on mobile. GSAP offsets a side card
     by 22% of ITS OWN width and scales it to 0.86, so a card reaches
     0.22 + 0.86/2 = 0.65 of its width from centre. Full-width cards therefore
     poked 15% of the stage out each side. Narrowing the cards to 76% shrinks
     the offset with them: 0.65 x 0.76 = 0.494, just inside the half-stage. */
  .c-stage__card {
    inset: 0 12%;
  }



}

/* ── Fan translation: YouTube carousel ────────────────────────────────────
   Built on native CSS scroll-snap rather than a carousel library: the browser
   gives us real momentum swipe on touch, keyboard scrolling and correct
   accessibility for free, and because the track is its own scroll container
   it can never widen the page the way a transform-based track can. */
.l-fantl {
  background: #ffffff;
  padding: 5rem 1.5rem;
  text-align: center;
}

.l-fantl__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.l-fantl__title {
  font-size: 1.9rem;
  color: var(--c-pink);
  margin-bottom: 0.9rem;
}

.l-fantl__text {
  color: var(--c-body);
  max-width: 620px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.l-fantl__note {
  margin-top: 1.75rem;
  font-size: 0.88rem;
  color: var(--c-muted);
}

.l-fantl__note a {
  color: var(--c-pink);
  font-weight: 700;
}

.c-ytc {
  position: relative;
}

.c-ytc__track {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  /* Room for the card shadow and the focus ring, which would otherwise be
     clipped by the scroll container. */
  padding: 0.5rem 0.25rem 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Stops a horizontal swipe that runs out of track from turning into a
     browser back-gesture or a page-level scroll. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.c-ytc__track::-webkit-scrollbar {
  display: none;
}

.c-ytc__item {
  /* Three across on desktop, minus the two gaps between them. */
  flex: 0 0 calc((100% - 2.5rem) / 3);
  scroll-snap-align: start;
}

.c-ytc__card {
  height: 100%;
  text-align: left;
}

.c-ytc__play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.c-ytc__play:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 4px;
}

.c-ytc__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.c-ytc__play:hover .c-ytc__thumb {
  transform: scale(1.06);
  opacity: 0.82;
}

.c-ytc__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--c-pink);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, background 0.3s ease;
}

.c-ytc__play:hover .c-ytc__badge {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Swapped in when a card is clicked, in place of the thumbnail button. */
.c-ytc__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.c-ytc__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-ytc__meta {
  padding: 0.85rem 0.15rem 0;
}

.c-ytc__name {
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--c-pink);
  margin-bottom: 0.3rem;
}

.c-ytc__sub {
  font-size: 0.83rem;
  color: var(--c-muted);
  line-height: 1.5;
}

.c-ytc__nav {
  position: absolute;
  top: calc((100% - 1.5rem) * 0.28);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--c-pink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.c-ytc__nav:hover {
  transform: scale(1.1);
}

.c-ytc__nav:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 3px;
}

.c-ytc__nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

.c-ytc__nav--prev { left: -14px; }
.c-ytc__nav--next { right: -14px; }

@media (max-width: 1000px) {
  /* Two across, then one, so the cards never get too small to read. */
  .c-ytc__item {
    flex: 0 0 calc((100% - 1.25rem) / 2);
  }
}

@media (max-width: 700px) {
  .l-fantl__title { font-size: 1.5rem; }

  .c-ytc__item {
    flex: 0 0 100%;
  }

  /* Touch swipes the track directly, so the arrows are just clutter here. */
  .c-ytc__nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-menu,
  .c-menu__subwrap,
  .c-burger__bar,
  .c-menu__caret {
    transition-duration: 0.01ms;
  }
}