:root{
  /* COLORS -> solid black site */
  --bg:#000;                 /* was #faf9f7 */
  --ink:#f5f5f5;             /* body text on black */
  --muted:#b3b3b3;

  --brand:#ff8a00; --brand2:#ffd166;

  /* UI tokens */
  --card:#000;               /* menus/cards use black now */
  --line:#111;               /* subtle border line on black */
  --radius:16px; --shadow:0 12px 36px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
.muted{color:var(--muted)}

.container{width:min(1200px,92vw); margin-inline:auto}
.section{padding:clamp(48px,7vw,88px) 0}
.section__title{font-size:clamp(22px,3.6vw,32px); font-weight:800; margin:0 0 18px}

/* =========================
   Header / Nav (black)
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#000;                       /* SOLID BLACK BAR */
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:16px; padding:.9rem clamp(16px,4vw,28px)}
.nav__brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.nav__brand img{height:36px; width:auto}
.nav__menu{display:flex; align-items:center; gap:clamp(14px,2vw,24px); margin-left:auto; list-style:none}
.nav__menu a,
.dropdown__btn{position:relative; padding:.25rem .1rem; font-weight:600; color:#fff; opacity:.9}
.nav__menu a:hover,
.dropdown__btn:hover{opacity:1}
.nav__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s cubic-bezier(.22,.61,.36,1)
}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__toggle{display:none; background:transparent; border:0; font-size:1.6rem; margin-left:auto; cursor:pointer; color:#fff}

/* dropdown (black) */
.dropdown{position:relative}
.dropdown__btn{background:transparent; border:0; font:inherit; cursor:pointer}
.dropdown__menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:260px; padding:.6rem;
  background:#000; border:1px solid var(--line); border-radius:12px;
  display:none; flex-direction:column; gap:.25rem; z-index:10;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.dropdown__menu a{padding:.55rem .65rem; border-radius:8px; color:#fff}
.dropdown__menu a:hover{background:#111}

/* =========================
   Hero (keep layout, no glow bg)
========================= */
.hero{padding:clamp(40px,8vw,60px) 0 0}
.hero__logo{width:min(380px,60vw); margin:16px auto 8px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.35))}

/* =========================
   Masonry collage (keep formation)
========================= */
.masonry-3{ column-count:3; column-gap:22px; }
@media (max-width:980px){ .masonry-3{ column-count:2; } }
@media (max-width:620px){ .masonry-3{ column-count:1; } }

/* ---- Frameless floating tiles (NO CARDS) ---- */
.tile{
  break-inside:avoid;
  display:block;
  margin:0 0 22px;
  /* removed frames/boxes/borders/shadows/radius */
  border-radius:0; background:transparent; border:0; box-shadow:none;
  transition:transform .25s ease;      /* keep a tiny lift on hover */
}

.tile__img{
  position:relative;
  width:100%;
  height:var(--h,260px);               /* keep heights for collage rhythm */
  overflow:visible;                    /* let transparent PNG/SVG breathe */
}

.tile__img img{
  width:100%; height:100%;
  object-fit:contain;                  /* IMPORTANT: no cropping */
  transform:translateZ(0);
  /* no extra filters/glow */
}

/* Hover: gentle lift only (no glow) */
.tile:hover{ transform:translateY(-4px); }
/* If you want zero motion: comment the line above */

/* label (optional). Hide by default to keep it clean */
.tile__label{ display:none; }

/* Size presets (unchanged) */
.tile--sm{ --h:190px; }
.tile--md{ --h:260px; }
.tile--lg{ --h:340px; }
.tile--xl{ --h:420px; }

/* tweak face framing if needed */
.tile__img img{ object-position:50% 20%; }

/* =========================
   Character Detail (unchanged from your file)
========================= */
.char-hero{
  background:#000;                      /* match black site */
  padding:clamp(28px,5vw,48px) 0;
  border-bottom:1px solid var(--line);
}
.char-hero__row{ display:grid; grid-template-columns:480px 1fr; gap:clamp(22px,4vw,48px); align-items:center; }
.char-hero__media img{
  width:100%; height:auto; border-radius:22px; border:1px solid var(--line);
  box-shadow:0 12px 36px rgba(0,0,0,.55); background:#000; object-fit:contain;
}
.breadcrumb{ font-size:.9rem; color:#888; margin-bottom:.4rem; }
.breadcrumb a{ color:inherit; }
.char-name{ font-size:clamp(28px,5vw,44px); margin:4px 0 10px; font-weight:800; }
.char-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; list-style:none; }
.char-tags li{
  background:#0c0c0c; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-weight:600; font-size:.9rem;
  box-shadow:none; color:#f0f0f0;
}
.char-blurb{ margin:8px 0 16px; max-width:58ch; }
.btn{ display:inline-block; border-radius:999px; padding:10px 16px; font-weight:700; transition:transform .2s ease; }
.btn--primary{ background:#ffd166; color:#000; }
.btn--primary:hover{ transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line); color:#fff; background:#000; margin-left:8px; }
.btn--ghost:hover{ transform:translateY(-2px); }
.char-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; max-width:720px; }
.char-facts dt{ font-weight:700; color:#888; font-size:.9rem; }
.char-facts dd{ margin:2px 0 0; font-weight:600; }
@media (max-width:980px){ .char-hero__row{ grid-template-columns:1fr; } }

/* =========================
   Footer
========================= */
.footer{border-top:1px solid var(--line); padding:28px 0; text-align:center; color:var(--muted)}

/* =========================
   Mobile
========================= */
@media(max-width:900px){
  .nav__toggle{display:inline-block}
  .nav__menu{
    position:absolute; right:16px; top:64px; background:#000; border:1px solid var(--line);
    border-radius:12px; padding:.8rem; box-shadow:0 18px 50px rgba(0,0,0,.6);
    display:none; flex-direction:column; gap:.4rem
  }
  .nav__menu.show{display:flex}
  .dropdown__menu{position:static; display:flex; border:0; box-shadow:none; padding:.2rem 0}
}
/* ========== FLASHLIGHT CURSOR (subtle on black) ========== */
/* Full-screen overlay; we paint a radial gradient "light" that follows the mouse */
.spotlight{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;                     /* above content, below menus if needed */
  /* mouse position set via CSS vars from JS */
  --mx: 50vw; 
  --my: 50vh;
  --r: 140px;                       /* light radius (adjust to taste) */
  background:
    radial-gradient(
      circle var(--r) at var(--mx) var(--my),
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.07) 50%,
      rgba(255,255,255,0.00) 70%
    );
  /* On pure black, normal blend is fine; try 'screen' if you want brighter */
  mix-blend-mode: normal;
  transition: opacity .18s ease;
  opacity: .9;
}

/* Press to "bloom" the light a bit */
body.is-clicking .spotlight{ --r: 180px; opacity: 1; }

/* Optional: dim/disable the flashlight on small screens */
@media (max-width: 620px){
  .spotlight{ opacity: .65; }
}

/* ========== OPTIONAL: CUSTOM CURSOR ICON (clapper/popcorn) ========== */
/* A lightweight element that follows the mouse with a tiny tilt */
.cursor-icon{
  position: fixed;
  left: 0; top: 0;
  width: 28px; height: 28px;        /* icon size */
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;                        /* hidden by default */
  transition: opacity .18s ease, transform .08s linear;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  image-rendering: -webkit-optimize-contrast;
}

/* Enable the icon by toggling one of these classes on <body> */
body.cursor--clapper .cursor-icon{
  background-image: url("assets/ui/cursor-clapper.png"); /* 64x64 transparent PNG */
  opacity: 1;
}
body.cursor--popcorn .cursor-icon{
  background-image: url("assets/ui/cursor-popcorn.png"); /* 64x64 transparent PNG */
  opacity: 1;
}

/* Hide the native cursor when using a custom icon (optional) */
body.cursor--clapper, body.cursor--popcorn { cursor: none; }
.dropdown__label {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  opacity: 0.6;
  text-transform: uppercase;
  pointer-events: none;
}
/* Footer base */
.ys-footer { background:#0b0f18; color:#eaf2ff; position:relative; padding-top:3rem; }
.ys-footer a { color:#cfe0ff; text-decoration:none; }
.ys-footer a:hover { text-decoration:underline; }
.ys-footer .container { max-width:1100px; }

/* Grid */
.ys-footer__grid {
  display:grid;
  gap:2rem;
  grid-template-columns: 1.2fr 1fr 1.5fr 1fr;
  align-items:start;
}
@media (max-width:1024px){ .ys-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .ys-footer__grid{ grid-template-columns:1fr; } }

/* Brand */
.ys-foot__brand { display:flex; flex-direction:column; gap:1rem; }
.ys-foot__logo { display:flex; align-items:center; gap:.75rem; font-weight:800; font-size:1.15rem; color:#fff; text-decoration:none; }
.ys-foot__logo img{ width:34px; height:34px; filter:drop-shadow(0 2px 10px rgba(0,183,255,.35)); }
.ys-foot__mission { color:#c0d4ff; line-height:1.6; }

/* Social */
.ys-social { display:flex; gap:.75rem; flex-wrap:wrap; padding:0; margin:0; list-style:none; }
.ys-social a{ display:inline-block; padding:.4rem .6rem; border:1px solid rgba(255,255,255,.1); border-radius:999px; }
.ys-social a:hover{ background:rgba(255,255,255,.06); }

/* Newsletter */
.ys-foot__newsletter { background:linear-gradient(180deg, rgba(0,255,199,.06), rgba(0,145,255,.06)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1.25rem; }
.ys-foot__title { margin:0 0 .25rem; font-size:1.05rem; color:#fff; }
.ys-foot__hint { margin:.25rem 0 1rem; color:#b9cbff; }
.ys-news { display:flex; gap:.5rem; flex-wrap:wrap; }
.ys-news input[type="email"]{ flex:1 1 220px; padding:.75rem .9rem; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0e1422; color:#eaf2ff; }
.ys-news .btn{ padding:.75rem 1rem; }
.ys-news__note{ display:block; color:#96b3ff; margin-top:.5rem; font-size:.85rem; }
.ys-hp{ position:absolute; left:-9999px; }

/* Links columns */
.ys-foot__links { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:640px){ .ys-foot__links{ grid-template-columns:1fr; } }
.ys-col__title{ color:#ffffff; margin:.25rem 0 .75rem; font-weight:700; letter-spacing:.02em; }
.ys-foot__links ul{ list-style:none; margin:0; padding:0; }
.ys-foot__links li{ margin:.45rem 0; }
.ys-foot__links a{ color:#cfe0ff; }
.ys-foot__links a:hover{ color:#ffffff; }

/* Character chips */
.ys-chiplist{ list-style:none; margin:.5rem 0 0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.ys-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:#0e1422; color:#eaf2ff; }
.ys-chip img{ width:22px; height:22px; border-radius:50%; background:#061024; }

/* Meta: contact / selectors / pay */
.ys-foot__meta{ display:flex; flex-direction:column; gap:1rem; }
.ys-select select{ background:#0e1422; color:#eaf2ff; border:1px solid rgba(255,255,255,.15); padding:.6rem .8rem; border-radius:10px; }
.ys-meta__row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ys-pay{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; opacity:.85; }
.ys-pay img{ height:22px; }

/* Legal bar */
.ys-legal{ margin-top:2rem; background:#0a0e17; border-top:1px solid rgba(255,255,255,.08); }
.ys-legal__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.ys-legal__links{ list-style:none; display:flex; gap:.9rem; margin:0; padding:0; }
.ys-legal__links a{ color:#b7c9ff; }
.ys-legal__links a:hover{ color:#fff; }

/* Back-to-top */
.ys-top{ position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:999px; border:none; background:#11b4ff; color:#001225; font-weight:800; box-shadow:0 10px 22px rgba(0,160,255,.35); cursor:pointer; opacity:0; pointer-events:none; transition:.25s; }
.ys-top.show{ opacity:1; pointer-events:auto; }
.ys-top:hover{ transform:translateY(-2px); }

/* Accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Youmé Home Hero — Clean Magical Portal ===== */

.hero--home {
  position: relative;
  padding: 5rem 0 4.5rem;
  background: radial-gradient(circle at top, #0b1020 0, #020617 55%, #020617 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* Single, clean glow behind the visual side */
.hero--home::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(56, 189, 248, 0.22) 0, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.32) 0, transparent 60%);
  filter: blur(4px);
  opacity: 0.9;
  z-index: 0;
}

/* Very subtle shift in light across the hero (no particles) */
.hero--home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 80%, rgba(15, 23, 42, 0.85), transparent 65%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero__copy {
  max-width: 36rem;
}

.hero__eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #a5b4fc;
  margin-bottom: 0.75rem;
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 0.5rem;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  vertical-align: middle;
}

.hero--home h1 {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}

.hero__sub {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: #e5e7eb;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.hero__note {
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.btn--primary {
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color: #020617;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.7);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.9);
}

.btn--ghost {
  background: transparent;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.7);
}

.btn--ghost:hover {
  border-color: #a855f7;
  background: rgba(15, 23, 42, 0.85);
}

/* HERO VISUAL — Clean portal */

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bigger portal visual */
.hero-orbit {
  position: relative;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced glow around the portal */
.hero-orbit::before {
  content: "";
  position: absolute;
  inset: -60px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.55) 0, transparent 80%);
  filter: blur(6px);
}

/* Outer ring (bigger) */
.hero-orbit__ring {
  position: absolute;
  border-radius: 999px;
  inset: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  opacity: 0.9;
  animation: orbit-rotate 26s linear infinite;
}

/* Inner ring (bigger) */
.hero-orbit__ring--inner {
  inset: 60px;
  border-width: 1.5px;
  border-color: rgba(129, 140, 248, 0.85);
  animation-duration: 18s;
  animation-direction: reverse;
}

/* Core orb bigger + brighter */
.hero-orbit__core {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 0%, #38bdf8, #0b1120 68%),
    radial-gradient(circle at 80% 100%, rgba(129, 140, 248, 0.7), transparent 60%);
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.9),
    0 0 70px rgba(15, 23, 42, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  animation: portal-pulse 5s ease-in-out infinite;
}

.hero__logo {
  max-width: 85%;
  height: auto;
}


@keyframes orbit-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes portal-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 16px rgba(56, 189, 248, 0.7),
      0 0 38px rgba(15, 23, 42, 0.9);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 0 22px rgba(56, 189, 248, 0.9),
      0 0 50px rgba(15, 23, 42, 1);
  }
}

/* Responsive */

@media (max-width: 768px) {
  .hero--home {
    padding-top: 4.5rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__copy {
    margin: 0 auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
    margin-bottom: 2rem;
  }

  .section__sub {
    max-width: 100%;
  }
}
/* ===== Youmé Footer – Clean & Playful ===== */

.ys-footer {
  background: #020617;
  color: #e5e7eb;
  margin-top: 4rem;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

/* Top area: brand + nav columns */
.ys-footer__top {
  padding: 3.5rem 0 2.5rem;
}

.ys-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: flex-start;
}

.ys-foot__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: #f9fafb;
}

.ys-foot__logo img {
  width: 28px;
  height: 28px;
}

.ys-foot__mission {
  font-size: 0.9rem;
  color: #9ca3af;
  max-width: 18rem;
  margin-bottom: 1.5rem;
}

.ys-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
}

.ys-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.8rem;
  text-decoration: none;
  color: #e5e7eb;
}

.ys-social a:hover {
  border-color: #a855f7;
}

/* Link columns */

.ys-foot-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
}

.ys-col__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: #f9fafb;
}

.ys-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ys-col li + li {
  margin-top: 0.25rem;
}

.ys-col a {
  font-size: 0.87rem;
  color: #9ca3af;
  text-decoration: none;
}

.ys-col a:hover {
  color: #e5e7eb;
}

/* Character chips */

.ys-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  margin: 0.4rem 0 0;
  list-style: none;
}

.ys-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.8rem;
  text-decoration: none;
  color: #e5e7eb;
}

.ys-chip:hover {
  border-color: #22d3ee;
}

/* Newsletter band */

.ys-footer__newsband {
  padding: 1.75rem 0 1.9rem;
  background: radial-gradient(circle at 0% 0%, #1d253b 0, #020617 52%, #020617 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(15, 23, 42, 0.9);
}

.ys-newsband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ys-newsband__copy {
  max-width: 26rem;
}

.ys-newsband__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 0.35rem;
}

.ys-newsband__copy h3 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

.ys-newsband__copy p {
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5f5;
}

/* Newsletter form look */

.ys-news--band {
  max-width: 26rem;
}

.ys-news__fields {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.ys-news--band input[type="email"] {
  flex: 1;
  padding: 0.75rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
  font-size: 0.9rem;
}

.ys-news--band input[type="email"]::placeholder {
  color: #6b7280;
}

.ys-news__note {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Legal bar */

.ys-legal {
  padding: 1.5rem 0;
}

.ys-legal__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
}

.ys-legal__left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ys-legal__contact span {
  font-size: 0.82rem;
  color: #9ca3af;
}

.ys-meta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ys-select select {
  background: #020617;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
  font-size: 0.8rem;
  padding: 0.25rem 0.8rem;
}

.ys-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ys-pay img {
  height: 18px;
  opacity: 0.8;
}

.ys-legal__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

.ys-legal__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0;
  margin: 0;
}

.ys-legal__links a {
  color: #9ca3af;
  text-decoration: none;
}

.ys-legal__links a:hover {
  color: #e5e7eb;
}

/* Footer responsive */

@media (max-width: 900px) {
  .ys-footer__grid {
    grid-template-columns: 1fr;
  }

  .ys-foot-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ys-newsband__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ys-news--band {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .ys-foot-links-grid {
    grid-template-columns: 1fr;
  }

  .ys-legal__right {
    align-items: flex-start;
    text-align: left;
  }
}
/* =========================
   EPISODE PAGE
========================= */

.episode-page {
  padding-top: 3rem;
}

.episode-title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.episode-sub {
  margin-bottom: 2.5rem;
}

.episode-section-title {
  font-size: 1.4rem;
  margin: 2.5rem 0 1.5rem;
  font-weight: 700;
  color: #fff;
  border-left: 4px solid #22d3ee;
  padding-left: 12px;
}

/* Full Episode Grid */
.video-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Video Card */
.video-card {
  background: #0e1422;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.video-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.video-card h3 {
  padding: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Shorts Grid */
.shorts-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.short-card {
  background: #0e1422;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.25s ease;
}

.short-card:hover {
  transform: translateY(-4px);
}

.short-card iframe {
  width: 100%;
  aspect-ratio: 9/16;
  border: 0;
}