:root {
  --bg-primary: #07110d;
  --bg-secondary: #0c1912;
  --bg-navbar: #08140e;
  --bg-card: #0e1c15;
  --bg-hover: #15291e;
  --accent: #79c496;
  --accent-hover: #9ed8b3;
  --text-main: #edf5e9;
  --text-muted: #9aaf9f;
  --border: #294a38;
  --shadow: 0 18px 46px rgba(1, 8, 5, .54);
  --font: "Manrope", Arial, sans-serif;
  --moon: #e2d2a4;
  --fern: #4d8c67;
}

body {
  background:
    radial-gradient(ellipse at 12% -8%, rgba(121,196,150,.18), transparent 35rem),
    radial-gradient(ellipse at 88% 8%, rgba(226,210,164,.09), transparent 28rem),
    linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 18px 18px,
    #07110d;
  color: var(--text-main);
}

.notice-bar {
  min-height: 29px;
  background: #d8c792;
  color: #102419;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-header {
  background: rgba(8,20,14,.95);
  border-color: #294a38;
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.top-line { padding-block: 1.05rem; }
.brand { gap: .86rem; color: var(--text-main); }
.brand-emblem {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--moon);
  border-radius: 70% 30% 66% 34% / 58% 46% 54% 42%;
  color: var(--moon);
  background: linear-gradient(145deg, rgba(121,196,150,.2), rgba(7,17,13,.2));
  box-shadow: inset 0 0 0 4px rgba(7,17,13,.72), 0 0 24px rgba(121,196,150,.18);
  font-family: "Cormorant Garamond", serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  transform: rotate(-8deg);
}
.brand-lockup { display: grid; line-height: .94; }
.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 600;
  letter-spacing: .015em;
}
.brand-edition {
  margin-top: .38rem;
  color: var(--accent);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.search-form, .language-control select {
  background: #07110d;
  color: var(--text-main);
  border-color: #315640;
}
.search-form {
  border-radius: 16px 4px 16px 4px;
  box-shadow: inset 0 0 0 1px rgba(226,210,164,.04);
}
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(121,196,150,.12); }
.search-form button {
  background: var(--accent);
  color: #07110d;
  border-radius: 12px 2px 12px 2px;
}
.language-control select { border-radius: 12px 3px 12px 3px; }
.category-nav { gap: .55rem; padding-block: .78rem; border-top: 1px solid rgba(121,196,150,.14); }
.nav-chip, .sort-pill, .page-button {
  background: #0c1912;
  color: #d9e9dc;
  border-color: #315640;
  border-radius: 14px 3px 14px 3px;
}
.nav-chip.active, .nav-chip:hover, .page-button.active, .page-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #07110d;
}

.section-head {
  position: relative;
  padding: 1.15rem 1.25rem 1.2rem;
  overflow: hidden;
  border: 1px solid #294a38;
  border-radius: 24px 5px 24px 5px;
  background: linear-gradient(110deg, rgba(121,196,150,.1), rgba(226,210,164,.025) 55%, transparent);
}
.section-head::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -56px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(226,210,164,.18);
  border-radius: 70% 30% 65% 35%;
  transform: rotate(28deg);
}
.section-head h1, .section-title-row h2, .video-details h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .015em;
}
.section-head h1 { font-size: clamp(2.15rem, 5vw, 3.8rem); }
.sort-pill {
  color: var(--moon);
  border-color: #5a684c;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-title-row { border-bottom-color: #294a38; }
.section-title-row h2::before { background: var(--accent); border-radius: 70% 30% 70% 30%; }
.view-all-link { color: var(--moon); }

.video-grid { gap: 1.2rem; }
.video-card {
  background: #0e1c15;
  border-color: #294a38;
  border-radius: 18px 4px 18px 4px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.video-card:hover {
  background: #15291e;
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 22px 52px rgba(1,8,5,.62), 0 0 0 1px rgba(121,196,150,.12);
}
.thumb-box img { filter: saturate(.9) contrast(1.03); transition: transform .45s ease, filter .45s ease; }
.video-card:hover .thumb-box img { filter: saturate(1.08) contrast(1.04); transform: scale(1.035); }
.card-body { padding: .82rem .9rem .92rem; text-align: left; }
.card-body h2 { color: #edf5e9; }
.card-meta { padding-top: .48rem; border-top: 1px solid rgba(121,196,150,.15); color: #9aaf9f; }
.card-play-button, .detail-play-button {
  background: rgba(7,17,13,.76);
  border: 1px solid rgba(226,210,164,.62);
  border-radius: 70% 30% 65% 35%;
  box-shadow: 0 12px 30px rgba(0,0,0,.44);
  transform: translate(-50%,-50%) rotate(-4deg);
  backdrop-filter: blur(4px);
}
.card-play-button { width: 58px; height: 58px; }
.card-play-button span, .detail-play-button span {
  border-left-color: var(--moon);
  transform: rotate(4deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.card-play-button span { border-top-width: 12px; border-bottom-width: 12px; border-left-width: 19px; }
.player-frame.has-embed .detail-play-button { display: flex; pointer-events: none; z-index: 3; }
.player-frame.has-embed.embed-engaged .detail-play-button,
.player-frame.has-embed:focus-within .detail-play-button { display: none; }

.player-frame { border: 1px solid #294a38; border-radius: 24px 5px 24px 5px; overflow: hidden; }
.video-details, .sidebar {
  background: #0e1c15;
  border-color: #294a38;
  border-radius: 20px 5px 20px 5px;
  box-shadow: var(--shadow);
}
.meta-row span { background: #172a1f; }
.tag-list span { background: rgba(121,196,150,.11); color: #bfe4cb; border: 1px solid rgba(121,196,150,.24); }
.site-footer { border-color: #294a38; color: #829687; }

@media (min-width: 980px) {
  .home-page .category-nav {
    position: sticky;
    top: 1rem;
    align-self: start;
    float: left;
    width: 205px;
    max-height: calc(100vh - 2rem);
    margin: 1.25rem 0 0 max(15px, calc((100vw - 1440px) / 2 + 15px));
    padding: .9rem;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(8,20,14,.95);
    border: 1px solid #294a38;
    border-radius: 22px 5px 22px 5px;
  }
  .home-page .nav-chip { width: 100%; justify-content: flex-start; text-align: left; }
  .home-page .page { padding-left: 240px; }
}

@media (max-width: 700px) {
  .brand-name { font-size: 1.65rem; }
  .brand-edition { letter-spacing: .1em; }
  .section-head { padding-inline: .85rem; }
  .card-play-button { width: 50px; height: 50px; }
}

.watch-page .watch-layout { display: block; }
.watch-page .sidebar { display: none; }

/* Match the standard play control used by site 09. */
.card-play-button, .detail-play-button {
  background: rgba(13,8,9,.68);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.12);
  transform: translate(-50%,-50%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.card-play-button { width: 54px; height: 54px; }
.card-play-button span, .detail-play-button span {
  border-left-color: #fff;
  transform: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
.card-play-button span { border-top-width: 12px; border-bottom-width: 12px; border-left-width: 19px; }
.video-card:hover .card-play-button { background: rgba(13,8,9,.78); }
.player-frame.has-embed .detail-play-button {
  display: flex;
  background: rgba(13,8,9,.94);
  pointer-events: none;
  z-index: 3;
}
.player-frame.has-embed.embed-engaged .detail-play-button,
.player-frame.has-embed:focus-within .detail-play-button { display: none; }
@media (max-width: 700px) {
  .card-play-button { width: 48px; height: 48px; }
}