/* ====================================================================
   ときめきの教典 / TOKIMEKI NO KYOTEN — stylesheet
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Baloo+2:wght@600;700;800&display=swap');

:root{
  /* --- brand palette --- */
  --pink:        #E883C5;
  --pink-deep:   #C24E96;
  --purple:      #8860D0;
  --purple-deep: #372B5E;
  --ink:         #2A2140;
  --ink-soft:    #6b6180;
  --paper:       #FFF9FC;
  --lilac:       #F4EBFC;
  --candy:       #FFD166;
  --white:       #ffffff;

  /* --- gradients --- */
  --grad-hero: linear-gradient(180deg, var(--purple) 0%, var(--pink) 100%);
  --grad-btn:  linear-gradient(120deg, var(--pink) 0%, var(--purple) 100%);

  /* --- type --- */
  --font-heading: 'Zen Maru Gothic', sans-serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-accent: 'Baloo 2', 'Zen Maru Gothic', sans-serif;

  /* --- layout --- */
  --maxw: 1180px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 14px 34px -14px rgba(55, 43, 94, .28);
  --shadow-pop: 0 6px 0 var(--purple-deep);

  --header-h: 76px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font: inherit; cursor:pointer; }
input, textarea{ font: inherit; }
h1,h2,h3,h4,p{ margin:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* prevents the mobile drawer (and any other transitioning element) from
   visibly animating while the viewport crosses a breakpoint during resize */
.is-resizing, .is-resizing *{
  transition: none !important;
}

/* ---------------------------------------------------------------- utility */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline:auto; padding-inline: 24px; }
.section{ padding: 96px 0; position:relative; }
.section--tight{ padding: 72px 0; }
.section--lilac{ background: var(--lilac); }
.section--dark{ background: var(--purple-deep); color: var(--white); }

.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-accent); font-weight:700;
  font-size: 13px; letter-spacing: .14em;
  color: var(--purple);
  margin-top: 10px;
}
.eyebrow::before, .eyebrow::after{ content:''; width:20px; height:2px; background: var(--pink); border-radius: 2px; }

.section-title{
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.35;
  color: var(--ink);
  display:inline-block;
  position: relative;
  padding: 10px 6px;
}
.section-title__mark{
  position:absolute; left:0; right:0; bottom:6px; height:.5em;
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  opacity:.28; border-radius: 6px; z-index:-1;
  transform-origin:left; transform: scaleX(0);
  transition: transform .7s cubic-bezier(.2,.8,.2,1) .15s;
}
.reveal.in-view .section-title__mark{ transform: scaleX(1); }
.section-head{ text-align:center; margin-bottom: 48px; }
.section-lede{
  max-width: 620px; margin: 14px auto 0; color: var(--ink-soft);
  line-height: 1.9; font-size: 15px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--white);
  background: var(--grad-btn);
  box-shadow: var(--shadow-pop);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }
.btn:hover{ transform: translateY(4px); box-shadow: 0 2px 0 var(--purple-deep); }
.btn:active{ transform: translateY(6px); box-shadow: 0 0px 0 var(--purple-deep); }
.btn--ghost{
  background: var(--white); color: var(--purple-deep);
  box-shadow: 0 0 0 2px var(--purple) inset;
}
.btn--ghost:hover{ background: var(--lilac); box-shadow: 0 0 0 2px var(--purple) inset; }
.btn--sm{ padding: 11px 22px; font-size: 13px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12px; font-weight:700; letter-spacing:.04em;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.85); color: var(--purple-deep);
  box-shadow: 0 0 0 1.5px var(--purple);
}
.chip--soon{ background: var(--candy); color: #5c3d00; box-shadow:none; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ================================================================== header */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  height: var(--header-h);
  display:flex; align-items:center;
  transition: background .35s ease, box-shadow .35s ease, height .35s ease;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.site-header.is-scrolled{
  background-color: var(--purple);
  box-shadow: 0 8px 24px -14px rgba(55,43,94,.45);
  height: 64px;
}
.site-header--solid{
  background-color: var(--purple);
  box-shadow: 0 8px 24px -14px rgba(55,43,94,.45);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 34px; width:auto; transition: height .35s ease; }
.is-scrolled .brand img{ height: 28px; }

.main-nav ul{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-family: var(--font-heading); font-weight: 700; font-size: 14.5px;
  color: var(--white); text-shadow: 0 1px 6px rgba(55,43,94,.35);
  position:relative; padding: 6px 2px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background: var(--white); border-radius: 3px;
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap: 18px; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius: 50%; border:none;
  background: var(--white); box-shadow: 0 0 0 1.5px var(--purple);
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:20px; height:20px; stroke: var(--purple-deep); fill:none; stroke-width:2.2; stroke-linecap:round; }

.main-nav .nav-social{ display:none; }

@media (max-width: 900px){
  .main-nav{
    position: fixed; inset: 64px 0 0 0; background: var(--purple-deep);
    display:flex; flex-direction:column; padding: 30px 24px; gap: 6px;
    transform: translateX(100%);
    transition: none;
    overflow-y:auto;
  }
  /* the slide animation is only enabled once the user actually opens the
     menu, so resizing across the breakpoint can never animate the drawer */
  .main-nav.is-animatable{ transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .main-nav li{ width:100%; border-bottom: 1px solid rgba(255,255,255,.15); }
  .main-nav a{ display:block; padding: 16px 4px; font-size:17px; }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav .nav-social{
    display:flex; flex-direction:row; align-items:center; gap:14px;
    width:100%; margin-top: 26px;
  }
  .nav-social li{ width:auto; border-bottom:none; }
  .nav-social a{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; padding:0; border-radius:50%;
    background: rgba(255,255,255,.12); color:#fff;
    transition: background .25s ease;
  }
  .nav-social a:hover{ background: rgba(255,255,255,.26); }
  .nav-social a::after{ display:none; }
  .nav-social svg{ width:21px; height:21px; }
  .nav-toggle{ display:flex; }
  .header-cta .btn span{ display:none; }
  .header-cta .btn{ padding: 13px; }
}

/* ================================================================== hero */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: calc(var(--header-h) + 30px);
  background: var(--pink);
  overflow: hidden;
}
.hero-drip{
  position:absolute; top:0; left:0; width:100%;
  z-index:1; pointer-events:none; line-height:0;
}
.hero-drip img{ display:block; width:100%; height:auto; }
.hero-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-sparkle{
  position:absolute; opacity:.9;
  animation: floaty 6s ease-in-out infinite;
}
.hero-sparkle svg{ width: 100%; height:100%; fill: var(--white); }
.hero-sparkle.s1{ width:26px; height:26px; top:20%; left:8%; animation-delay:.2s; }
.hero-sparkle.s2{ width:16px; height:16px; top:38%; left:20%; animation-delay:1.4s; }
.hero-sparkle.s3{ width:34px; height:34px; top:16%; right:10%; animation-delay:.8s; }
.hero-sparkle.s4{ width:18px; height:18px; top:50%; right:6%; animation-delay:2s; }

.hero-heart{
  position:absolute; color: var(--white); opacity:.9;
  animation: floaty 7s ease-in-out infinite;
}
.hero-heart svg{ width:100%; height:100%; }
.hero-heart.h1{ width:30px; height:27px; top:10%; left:6%; animation-delay:.3s; }
.hero-heart.h2{ width:20px; height:18px; top:32%; left:13%; animation-delay:1.8s; }
.hero-heart.h3{ width:22px; height:20px; top:58%; left:5%; animation-delay:1s; }
.hero-heart.h4{ width:28px; height:25px; top:12%; right:6%; animation-delay:1.2s; }
.hero-heart.h5{ width:18px; height:16px; top:30%; right:14%; animation-delay:2.4s; }
.hero-heart.h6{ width:24px; height:22px; top:56%; right:4%; animation-delay:.6s; }

.hero-content{
  position: relative; z-index:2; width:100%;
  padding: 88px 0 56px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-logo{ max-width: 460px; width: 78%; margin: 0 auto 8px; filter: drop-shadow(0 10px 22px rgba(55,43,94,.18)); }
.hero-group{ max-width: 620px; width: 88%; margin: 0 auto; }
.hero-scroll{
  position:absolute; left:50%; bottom: 20px; transform: translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--purple-deep); font-size:11px; letter-spacing:.16em;
  font-family: var(--font-accent); font-weight:700;
  animation: bob 2.2s ease-in-out infinite;
}
.hero-scroll svg{ width:16px; height:16px; stroke: var(--purple-deep); fill:none; stroke-width:2.4; }

@keyframes bob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }
@keyframes floaty{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-16px) rotate(12deg);} }

/* ================================================================== about */
.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center;
}
.about-head{ text-align:center; margin-bottom: 30px; }
.about-body p{ color: var(--ink-soft); line-height: 2.05; font-size: 15.5px; margin-bottom: 4px; }
.about-body strong{ color: var(--pink-deep); font-weight:700; }
.about-figure{ position:relative; }
.about-figure img{ position:relative; z-index:2; }
.about-figure::before{
  content:''; position:absolute; inset: 6% 4%;
  background: var(--grad-btn); border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  opacity:.18; z-index:1; animation: blob 9s ease-in-out infinite;
}
@keyframes blob{
  0%,100%{ border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; }
  50%{ border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-figure{ order:-1; max-width: 320px; margin: 0 auto; }
}

/* ================================================================== characters */
.char-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  align-items:end;
}
.char-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding: 0 0 24px; margin:0;
  background:none; border:none; cursor:pointer;
  font: inherit; color: inherit; text-align:center;
}
.char-card__figure{
  position:relative; z-index:1; display:flex; width:100%;
  height: clamp(240px, 26vw, 400px);
  align-items:flex-end; justify-content:center;
  padding-top: 16px;
}
.char-card__figure img{
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom;
  margin:0; display:block;
  filter: drop-shadow(0 18px 22px rgba(55,43,94,.22));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.char-card:hover .char-card__figure img,
.char-card:focus-visible .char-card__figure img{
  transform: translateY(-14px) scale(1.05) rotate(-1.5deg);
  filter: drop-shadow(0 26px 26px rgba(55,43,94,.3));
}
.char-card--guruguru:hover .char-card__figure img{ transform: translateY(-14px) scale(1.05) rotate(1.5deg); }

.char-card__body{ position:relative; z-index:1; display:block; margin-top: 14px; }
.char-card__name{
  display:block; font-family: var(--font-heading); font-weight:900;
  font-size: clamp(22px, 2.4vw, 28px); line-height:1.3;
}
.char-card__cv{
  display:block; margin-top: 6px;
  font-size: 13px; font-weight:700; color: var(--purple);
  letter-spacing:.02em;
}
.char-card__more{
  display:inline-flex; align-items:center; gap:6px; margin-top: 14px;
  font-family: var(--font-accent); font-weight:800; font-size: 11.5px;
  letter-spacing:.12em; color:#fff;
  background: var(--grad-btn); padding: 9px 20px; border-radius:999px;
  box-shadow: 0 4px 0 var(--purple-deep);
  transition: transform .18s ease, box-shadow .18s ease;
}
.char-card__more svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; }
.char-card:hover .char-card__more{ transform: translateY(3px); box-shadow: 0 1px 0 var(--purple-deep); }

@media (max-width: 900px){
  .char-grid{ gap: 18px; }
  .char-card__figure{ height: clamp(150px, 24vw, 300px); }
  .char-card__name{ font-size: clamp(16px, 2.6vw, 22px); }
  .char-card__cv{ font-size: 11.5px; margin-top:4px; }
  .char-card__more{ margin-top: 10px; padding: 8px 14px; font-size: 10.5px; letter-spacing:.08em; }
  .char-card__more svg{ width:12px; height:12px; }
}
@media (max-width: 600px){
  .char-grid{ gap: 10px; }
  .char-card{ padding-bottom: 12px; }
  .char-card__figure{ height: 32vw; padding-top: 8px; }
  .char-card__body{ margin-top: 8px; }
  .char-card__name{ font-size: clamp(13px, 3.8vw, 18px); }
  .char-card__cv{ font-size: 9.5px; letter-spacing:0; }
  .char-card__more{ margin-top: 8px; padding: 6px 10px; font-size: 9px; gap:4px; }
  .char-card__more svg{ display:none; }
}

/* ---- character detail modal ---- */
.modal-overlay--char{ align-items:center; }
.char-modal{
  position:relative; width:100%; max-width: 860px;
  max-height: 88vh; overflow-y:auto;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 40px 44px; display:grid; grid-template-columns: 300px 1fr; gap: 36px;
  align-items:center;
  transform: translateY(18px) scale(.97);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
  text-align:left;
}
.modal-overlay--char.is-open .char-modal{ transform: translateY(0) scale(1); }
.char-modal__figure{
  display:flex; align-items:flex-end; justify-content:center;
  height: 340px;
}
.char-modal__figure img{
  height:100%; width:auto; max-width:100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 16px 20px rgba(55,43,94,.22));
}
.char-modal__name{ font-family: var(--font-heading); font-weight:900; font-size: 30px; line-height:1.3; }
.char-modal__cv{ margin-top:6px; font-size: 14px; font-weight:700; color: var(--purple); }
.char-modal__quote{
  margin: 18px 0; padding: 14px 16px;
  font-size: 14px; font-weight:700; line-height:1.8; color: var(--ink);
  background: var(--lilac); border-radius: var(--radius-sm);
}
.char-modal__desc{ font-size: 13.5px; color: var(--ink-soft); line-height:1.95; }
.char-modal__desc p + p{ margin-top: 10px; }

@media (max-width: 760px){
  .char-modal{ grid-template-columns: 1fr; gap: 18px; padding: 34px 24px; text-align:center; }
  .char-modal__figure{ height: 230px; }
  .char-modal__desc{ text-align:left; }
  .char-modal__name{ font-size: 25px; }
}

/* ================================================================== meet (anime / drama) */
.meet-sub{ margin-bottom: 76px; }
.meet-sub:last-child{ margin-bottom:0; }
.meet-sub__head{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px;
  margin-bottom: 14px;
}
.meet-sub__title{
  font-family: var(--font-heading); font-weight:900; font-size: clamp(20px,3vw,26px);
  display:flex; align-items:center; gap:10px;
}
.meet-sub__title .ico{
  width:38px; height:38px; border-radius: 50%; background: var(--grad-btn);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.meet-sub__title .ico svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.3; }
.meet-sub__lede{
  color: var(--ink-soft); line-height:1.95; font-size:14.5px;
  max-width: 700px; margin: 0 auto 34px;
  text-align:center; text-wrap: balance;
}
.meet-sub__lede + .meet-sub__lede{ margin-top:-22px; }

.ep-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 26px; }
.ep-grid--vertical{
  grid-template-columns: repeat(3, minmax(0, 260px));
  justify-content:center; gap: 28px;
}
.ep-grid--single{ grid-template-columns: minmax(0, 300px); }
.ep-card{
  border-radius: var(--radius-md); overflow:hidden; background: var(--white);
  box-shadow: var(--shadow-soft);
}
.ep-card__thumb{
  position:relative; aspect-ratio: 16/10; background: var(--grad-hero);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ep-grid--vertical .ep-card__thumb{ aspect-ratio: 9/16; }
.ep-card__thumb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%);
}
.ep-card__thumb--soon::after{ background: rgba(55,43,94,.18); }
.ep-card__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.ep-card__soon-mark{
  position:relative; z-index:1;
  font-family: var(--font-accent); font-weight:800; font-size:16px;
  letter-spacing:.1em; line-height:1.4; text-align:center; color:#fff;
  text-shadow: 0 2px 10px rgba(55,43,94,.45);
}
.ep-card__no{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family: var(--font-accent); font-weight:800; font-size:11px;
  color: var(--white); background: rgba(42,33,64,.55); padding:4px 10px; border-radius: 999px;
}
.ep-card__body{ padding: 16px 18px 20px; }
.ep-card__title{ font-family: var(--font-heading); font-weight:700; font-size:15px; }

/* ---- YouTube facade embed ---- */
.ep-embed{
  border:none; padding:0; margin:0; cursor:pointer; width:100%;
  background: var(--purple-deep);
}
.ep-embed__cover{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; opacity:1;
}
.ep-embed .ep-play{
  position:absolute; z-index:2; left:50%; top:50%; transform: translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background: rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  transition: transform .25s ease;
}
.ep-embed .ep-play svg{ width:22px; height:22px; fill: var(--purple-deep); stroke:none; margin-left:3px; }
.ep-embed:hover .ep-play{ transform: translate(-50%,-50%) scale(1.1); }
.ep-embed.is-loaded{ cursor:default; }
.ep-embed.is-loaded .ep-embed__cover,
.ep-embed.is-loaded .ep-play,
.ep-embed.is-loaded .ep-card__no{ display:none; }
.ep-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ep-card__soon-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:11px; font-weight:700; color:#8a5b00; background: var(--candy);
  padding: 4px 10px; border-radius: 999px;
}

.meet-sub__foot{ display:flex; align-items:center; justify-content:center; gap:16px; flex-direction:column; }
.meet-sub__foot-note{ font-size:12.5px; color: var(--ink-soft); }
.meet-sub__foot-note a{ color: var(--purple); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 900px){
  .ep-grid{ grid-template-columns: 1fr; max-width:420px; margin-inline:auto; margin-bottom:26px; }
  .ep-grid--vertical{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 460px; gap: 18px;
  }
}
@media (max-width: 520px){
  .ep-grid--vertical{ grid-template-columns: minmax(0, 260px); max-width: 260px; }
}

/* ================================================================== news */
.news-list{ max-width: 780px; margin: 0 auto; display:flex; flex-direction:column; gap:2px; }
.news-item{
  width:100%; display:grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items:center;
  padding: 22px 8px; border-bottom: 1px solid rgba(55,43,94,.12);
  background:none; border-left:none; border-right:none; border-top:none;
  cursor:pointer; text-align:left; font: inherit; color: inherit;
}
.news-date{ font-family: var(--font-accent); font-weight:700; color: var(--purple); font-size:13.5px; }
.news-body{ display:block; }
.news-body__tag{
  display:inline-block; font-size:11px; font-weight:700; color: var(--pink-deep);
  background: rgba(232,131,197,.14); padding: 3px 10px; border-radius: 999px; margin-bottom:6px;
}
.news-body__title{ display:block; font-weight:700; font-size:15px; line-height:1.6; }
.news-arrow{ width:20px; height:20px; }
.news-arrow svg{ width:100%; height:100%; stroke: var(--purple); fill:none; stroke-width:2.3; transition: transform .25s ease; }
.news-item:hover .news-arrow svg{ transform: translateX(4px); }

@media (max-width: 640px){
  .news-item{ grid-template-columns: 1fr auto; gap:6px 12px; align-items:start; }
  .news-date{ grid-column: 1 / -1; }
}

/* ---- fullscreen news modal ---- */
.modal-overlay.modal-overlay--news{ padding:0; }
.news-modal{
  position:relative; width:100%; height:100%;
  background: var(--paper); overflow-y:auto;
  transform: translateY(20px); opacity:0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.modal-overlay--news.is-open .news-modal{ transform: translateY(0); opacity:1; }
.news-modal__close{
  position: fixed; top: 22px; right: 26px; z-index:2;
  width:44px; height:44px;
}
.news-modal__close svg{ width:16px; height:16px; }
.news-modal__inner{
  max-width: 720px; margin: 0 auto; padding: 96px 24px 90px;
}
.news-modal__meta{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.news-modal__date{ font-family: var(--font-accent); font-weight:700; color: var(--purple); font-size:14px; }
.news-modal__meta .news-body__tag{ margin-bottom:0; }
.news-modal__title{
  font-family: var(--font-heading); font-weight:900;
  font-size: clamp(22px, 3.4vw, 30px); line-height:1.5;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 2px solid rgba(136,96,208,.2);
}
.news-modal__body{ font-size:14.5px; color: var(--ink-soft); line-height:2.05; }
.news-modal__body p + p{ margin-top: 16px; }
.news-modal__foot{
  margin-top: 46px; padding-top: 30px;
  border-top: 1px solid rgba(55,43,94,.12);
  display:flex; justify-content:center;
}
.news-modal__foot .ico-flip{ transform: rotate(180deg); }
.news-detail__linklabel{ font-weight:700; color: var(--ink); margin-top: 26px !important; }
.news-detail__link{
  display:inline-flex; align-items:center; gap:7px; margin-top: 6px;
  color: var(--purple); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}
.news-detail__link svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; transition: transform .25s ease; }
.news-detail__link:hover svg{ transform: translate(2px,-2px); }

/* ================================================================== community / goods */
.panel{
  max-width: 760px; margin: 0 auto; text-align:center;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 52px 40px; box-shadow: var(--shadow-soft);
  position: relative; overflow:hidden;
}
.panel::before{
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background: var(--grad-btn); opacity:.12; top:-90px; right:-90px;
}
.panel p{ color: var(--ink-soft); line-height:2; font-size:14.5px; margin-bottom:26px; position:relative; }
.panel .btn{ position:relative; }

/* ================================================================== episode submit form */
.form-panel{
  max-width: 720px; margin: 0 auto; background: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 44px 36px;
}
.field{ margin-bottom: 22px; }
.field label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; }
.field .req{ color: var(--pink-deep); font-size:11px; margin-left:4px; }
.field .hint{ display:block; font-weight:400; font-size:11.5px; color: var(--ink-soft); margin-top:5px; line-height:1.6; }
.field input[type=text], .field input[type=email], .field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(55,43,94,.18); background: var(--paper);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(136,96,208,.15);
}
.field textarea{ min-height: 130px; resize: vertical; }
.check-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom: 14px; font-size: 13px; line-height:1.7; color: var(--ink-soft); }
.check-row input{ margin-top:4px; width:16px; height:16px; accent-color: var(--purple); flex-shrink:0; }
.form-foot{ margin-top: 30px; text-align:center; }
.form-note{ margin-top: 14px; font-size:12px; color: var(--ink-soft); text-align:center; }

/* ================================================================== divider */
.divider{ height: 2px; background: var(--purple); }
.divider--pink{ background: var(--pink); }

/* ================================================================== cast & staff */
.credits{ max-width: 680px; margin: 0 auto; }
.credits-block + .credits-block{ margin-top: 48px; }
.credits-block__head{
  font-family: var(--font-accent); font-weight:800; font-size: 15px;
  letter-spacing:.16em; color: var(--ink);
  text-align:center; margin-bottom: 20px;
}
.credits-list{
  margin:0; border-top: 1px solid rgba(55,43,94,.18);
}
.credits-row{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center;
  gap: 16px; padding: 20px 8px;
  border-bottom: 1px solid rgba(55,43,94,.1);
}
.credits-row dt{
  text-align:center;
  font-size: 15px; font-weight:700; color: var(--ink-soft);
}
.credits-row dd{
  margin:0; text-align:center;
  font-family: var(--font-heading); font-weight:700; font-size: 18px; color: var(--ink);
}

@media (max-width: 600px){
  .credits-block__head{ font-size: 13.5px; }
  .credits-row{ gap: 10px; padding: 16px 4px; }
  .credits-row dt{ font-size: 13px; }
  .credits-row dd{ font-size: 16px; }
}

/* ================================================================== footer */
.site-footer{ background: var(--purple); color: rgba(255,255,255,.9); padding: 56px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: 30px; margin-bottom: 40px; }
.footer-brand img{ height: 100px; margin-bottom: 18px; }
.footer-social{ display:flex; align-items:center; gap: 12px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); color:#fff;
  transition: background .25s ease, transform .25s ease;
}
.footer-social a:hover{ background: rgba(255,255,255,.26); transform: translateY(-3px); }
.footer-social svg{ width: 20px; height: 20px; }
.footer-links{ display:flex; gap: 56px; flex-wrap:wrap; }
.footer-col h5{ font-family: var(--font-heading); font-size:13px; margin-bottom:14px; color: var(--candy); letter-spacing:.06em; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13px; color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.footer-bottom p{ font-size: 11px; line-height: 1.9; color: rgba(255,255,255,.5); }
.footer-copy{ margin-top: 10px; font-size:11px; letter-spacing:.05em; color: rgba(255,255,255,.45); }

/* ================================================================== floating newsletter button */
.fab{
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  width: 92px; height: 92px; border-radius: 50%;
  border: none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background: var(--grad-btn); color:#fff;
  box-shadow: 0 6px 0 var(--purple-deep), var(--shadow-soft);
  animation: fab-bob 3.2s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.fab span{
  font-family: var(--font-heading); font-weight:700; font-size:11px;
  line-height:1.3; letter-spacing:.02em; text-align:center;
}
.fab:hover{ transform: translateY(4px); box-shadow: 0 2px 0 var(--purple-deep), var(--shadow-soft); }
.fab:active{ transform: translateY(6px); box-shadow: 0 0px 0 var(--purple-deep); }
@keyframes fab-bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

@media (max-width: 640px){
  .fab{ right: 14px; bottom: 14px; width: 72px; height:72px; }
  .fab svg{ width:17px; height:17px; }
  .fab span{ font-size:9.5px; }
}

/* ================================================================== modal */
.modal-overlay{
  position: fixed; inset:0; z-index: 900;
  background: rgba(42,33,64,.55); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background: var(--white); border-radius: var(--radius-lg); padding: 40px 34px;
  max-width: 420px; width:100%; position:relative; text-align:center;
  transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
}
.modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  border:none; background: var(--lilac); display:flex; align-items:center; justify-content:center;
}
.modal-close svg{ width:14px; height:14px; stroke: var(--purple-deep); fill:none; stroke-width:2.4; }
.modal h3{ font-family: var(--font-heading); font-weight:900; font-size:20px; margin-bottom:8px; }
.modal p{ font-size:13.5px; color: var(--ink-soft); margin-bottom: 22px; line-height:1.8; }
.modal input[type=email]{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom:14px;
  border: 1.5px solid rgba(55,43,94,.18); background: var(--paper);
}
.modal-success{ display:none; }
.modal.is-success .modal-form{ display:none; }
.modal.is-success .modal-success{ display:block; }

/* ================================================================== drama episode detail page */
.drama-hero{ padding-top: calc(var(--header-h) + 44px); }
.drama-grid{
  display:grid; grid-template-columns: 420px 1fr; gap: 60px; align-items:start;
}
.drama-figure{
  position: sticky; top: calc(var(--header-h) + 24px);
  border-radius: var(--radius-lg); overflow:hidden;
  background: var(--lilac); box-shadow: var(--shadow-soft);
}
.drama-figure img{ width:100%; height:auto; display:block; }

.drama-eyebrow{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-accent); font-weight:700; font-size:13px;
  letter-spacing:.1em; color: var(--purple); margin-bottom: 8px;
}
.drama-eyebrow .ico{
  width:26px; height:26px; border-radius:50%; background: var(--grad-btn);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.drama-eyebrow .ico svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:2.4; }
.drama-title{
  font-family: var(--font-heading); font-weight:900;
  font-size: clamp(19px, 2.2vw, 24px); line-height:1.6;
  color: var(--ink); margin-bottom: 38px;
}

.drama-ep-no{ font-family: var(--font-accent); font-weight:700; font-size:13px; color: var(--purple); letter-spacing:.1em; }
.drama-ep-title{
  font-family: var(--font-heading); font-weight:900;
  font-size: clamp(23px, 3vw, 30px); line-height:1.5;
  margin: 6px 0 6px;
}
.drama-ep-sub{ font-size:13.5px; font-weight:700; color: var(--ink-soft); margin-bottom: 30px; }

.drama-body{ color: var(--ink-soft); line-height:2.05; font-size:14.5px; margin-bottom: 44px; }
.drama-body p + p{ margin-top: 16px; }

.drama-credit{ margin-bottom: 34px; }
.drama-credit__head{ font-family: var(--font-heading); font-weight:900; font-size:15px; margin-bottom:14px; color: var(--ink); }
.drama-credit__list{ display:flex; flex-direction:column; gap:8px; }
.drama-credit__row{ font-size:13.5px; color: var(--ink-soft); }
.drama-credit__row b{ color: var(--ink); font-weight:700; }

.drama-cta{ margin-top: 46px; padding-top: 38px; border-top: 1px solid rgba(55,43,94,.14); text-align:center; }
.drama-cta__head{ font-family: var(--font-heading); font-weight:900; font-size:16px; margin-bottom:18px; }
.drama-cta__buttons{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.drama-cta__buttons > div{ width:100%; max-width: 380px; }
.drama-cta .btn{ width:100%; }
.drama-cta__note{ margin-top:10px; font-size:12.5px; color: var(--ink-soft); line-height:1.8; }

/* the paid edition is the primary conversion point, so it gets a filled card */
.drama-cta--full{
  margin-top: 40px; padding: 36px 30px 38px;
  border: none; border-radius: var(--radius-lg);
  background: var(--purple); color: var(--white);
  box-shadow: var(--shadow-soft);
  position:relative;
}
.drama-cta__badge{
  display:inline-block; margin-bottom: 14px;
  font-family: var(--font-accent); font-weight:800; font-size:11.5px;
  letter-spacing:.1em; color: var(--purple-deep); background: var(--candy);
  padding: 7px 18px; border-radius: 999px;
}
.drama-cta__head--lg{ font-size: clamp(18px, 2.4vw, 22px); margin-bottom: 12px; }
.drama-cta--full .drama-cta__head{ color: var(--white); }
.drama-cta__lede{ font-size:13.5px; color: var(--ink-soft); line-height:1.9; margin-bottom: 26px; }
.drama-cta--full .drama-cta__lede{ color: rgba(255,255,255,.88); }
.drama-cta--full .drama-cta__note{ color: rgba(255,255,255,.72); }

/* on the purple card, the buy buttons invert to white so they read as the primary actions */
.drama-cta--full .btn{
  background: var(--white); color: var(--purple-deep);
  box-shadow: 0 6px 0 var(--purple-deep);
}
.drama-cta--full .btn:hover{ background: var(--paper); box-shadow: 0 2px 0 var(--purple-deep); }
.drama-cta__note .chip--soon{ margin-top:8px; font-size:10.5px; padding: 4px 12px; }

/* audio drama banner on the top page */
.drama-banner{
  display:block; max-width: 720px; margin: 0 auto 30px;
  border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.drama-banner img{ width:100%; height:auto; display:block; }
.drama-banner:hover{ transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(55,43,94,.42); }

@media (max-width: 860px){
  .drama-grid{ grid-template-columns: 1fr; gap: 30px; }
  .drama-figure{ position:static; max-width: 340px; margin: 0 auto; }
}

/* ================================================================== misc sections spacing */
.section > .wrap > .section-head:first-child{ margin-top:0; }
::selection{ background: var(--pink); color:#fff; }