:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  --flag-red: #AE1C28;
  --flag-blue: #21468B;
  --gold: #f0b400;
  --gold-soft: #ffe36a;
  --line: rgba(0, 0, 0, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.55;
}
a { color: var(--flag-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.topbar { background: var(--flag-red); color: #fff; font-size: 0.82rem; letter-spacing: .04em; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.topbar span { opacity: .9; }

header.site {
  background: var(--flag-red);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 4px solid #fff;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.brand { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.brand strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; letter-spacing: .08em; font-weight: 600; }
.brand em { font-style: normal; font-size: .78rem; color: #ffe36a; }
nav { display: flex; align-items: center; margin-left: auto; }
nav a { color: #fff; margin-left: 18px; font-weight: 600; text-decoration: none; font-size: .95rem; }
nav a.nav-end { margin-left: 18px; }
nav a:hover, nav a.active { color: #ffe36a; text-decoration: none; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  header.site .wrap { position: relative; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  header.site nav { display: none; width: 100%; }
  header.site nav.open { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; }
  header.site nav a, header.site nav a.nav-end { margin: 6px 0; }
}

.hero-slider { position: relative; height: 460px; overflow: hidden; background: var(--flag-red); }
.hero-slider .slides { position: absolute; inset: 0; }
.hero-slider .slide { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity .7s ease; }
.slide-name { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(92%, 900px); padding: 0; background: none; color: #fff; text-align: center; font-weight: 800; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
.admin-fold { margin: 28px 0; border-top: 1px solid #d7e3ee; }
.admin-fold summary { cursor: pointer; font-size: 1.4rem; font-weight: 800; padding: 14px 0; }
.admin-fold summary:hover { color: #21468B; }
.partner-track { display: flex; gap: 28px; width: max-content; padding: 22px 16px; animation: partner-move 28s linear infinite; }
.partner-slider:hover .partner-track { animation-play-state: paused; }
.partner-card { display: flex; align-items: center; justify-content: center; width: 220px; height: 90px; }
.partner-card img { max-width: 200px; max-height: 72px; object-fit: contain; }
@keyframes partner-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-slider .slide.is-on { opacity: 1; }
.slide-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0,0,0,.25); z-index: 2; }
.slide-bar span { display: block; height: 100%; width: 0; background: #fff; }

.hero { background: #ffffff; color: #1a1a1a; padding: 48px 0 40px; text-align: center; }
.hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 auto 12px; max-width: 68rem; }
.hero p { max-width: 68rem; font-size: 1.15rem; margin: 0 auto 16px; }
.badge { display: inline-block; border: 1px solid var(--flag-red); color: var(--flag-red); padding: 4px 10px; border-radius: 999px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--flag-red); color: #fff; font-weight: 700; border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--flag-red); border: 2px solid var(--flag-red); }

.player-bar { background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(0,0,0,.06); border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-top: 12px; }
.now small { display: block; color: #666; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; }
.now strong { font-size: 1.05rem; }
.section { padding: 56px 0; background: #fff; }
.section h2 { font-family: "Playfair Display", Georgia, serif; font-size: 2rem; margin: 0 0 8px; }
.lead { color: #444; margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.page-head { padding: 36px 0 8px; }
.page-head h1 { font-family: "Playfair Display", Georgia, serif; margin: 0 0 8px; }
form.stack { display: grid; gap: 12px; max-width: 560px; }
label { font-weight: 600; font-size: .92rem; }
input, textarea, select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.note { font-size: .85rem; color: #555; }

footer { background: var(--flag-blue); color: #fff; padding: 28px 0 36px; margin-top: 24px; }
footer a { color: #ffe36a; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-center { flex-direction: column; align-items: center; text-align: center; }
.foot-center img { width: min(480px, 95%); height: auto; }

.request-banner { display: block; margin: 22px auto 0; text-align: center; }
.request-banner img { width: 480px; max-width: 100%; height: auto; border-radius: 8px; }
.player-dock { position: fixed; left: 16px; bottom: 16px; width: 180px; background: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.28); padding: 12px 12px 10px; z-index: 800; text-align: center; }
.dock-cover { width: 154px; height: 154px; object-fit: cover; border-radius: 8px; background: #eee; }
.dock-links { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.dock-artist { margin-top: 8px; font-size: 14px; color: var(--flag-blue); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-title { font-size: 13px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; text-decoration: none; font-size: 20px; background: #f3f3f3; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dock-links .dock-ico:first-child { background: linear-gradient(#ffe36a,#f0b400); }
.dock-links .dock-ico:nth-child(2) { background: linear-gradient(#6ad0ff,#2a7ad4); color: #fff; }
.dock-web { background: linear-gradient(#333,#111); color: #fff; }
.dock-socan { display: block; margin-top: 10px; line-height: 0; }
.dock-socan img { width: 120px; height: auto; }
.request-frame { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(980px, 96vw); height: min(720px, 82vh); z-index: 2000; background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.request-frame[hidden] { display: none !important; }
.request-frame-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--flag-red); color: #fff; }
.request-frame iframe { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #51bdfe; }
.playlist-box { flex: 1; display: flex; flex-direction: column; background: #fff; }
.playlist-box iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 760px) {
  .request-frame { inset: 0; border-radius: 0; transform: none; top: 0; left: 0; width: 100%; height: 100%; }
  .player-dock { left: 8px; bottom: 8px; width: 180px; }
  .dock-cover { width: 148px; height: 148px; }
  header.site .wrap { flex-direction: column; align-items: flex-start; }
  nav a { margin: 0 14px 0 0; }
}