:root {
	--ink: #1d1633;
	--ink-soft: #4a4263;
	--cream: #fdf6ec;
	--paper: #fffdf8;
	--plum: #4b2e83;
	--plum-deep: #2e1a52;
	--wine: #7a2230;
    --wine-deep: #4e131e;
	--coral: #ff6b6b;
	--amber: #ffb347;
	--teal: #2ec4b6;
	--sky: #4a9ee8;
	--gold: #f4c95d;
	--gold-soft: #e6cf94;
	--grape: #8b5cf6;
	--teal: #2ec4b6;
	--aegean: #2a6b78;
	--aegean-mid: #3794a6;
	--line: rgba(75, 46, 131, 0.12);
	--shadow: 0 18px 40px -18px rgba(46, 26, 82, 0.45);
	--radius: 22px;
	--radius-pill: 40px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Nunito', system-ui, sans-serif;
	color: var(--ink);
	background:
	  radial-gradient(circle at 12% 8%, rgba(255, 179, 71, 0.18), transparent 30%),
	  radial-gradient(circle at 88% 4%, rgba(46, 196, 182, 0.16), transparent 32%),
	  radial-gradient(circle at 70% 92%, rgba(255, 107, 107, 0.12), transparent 38%),
	  var(--cream);
	line-height: 1.65;
	overflow-x: hidden;
}

a { color: var(--plum); text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Google Translate bar */
.google-translator {
	background: var(--wine-deep); color: var(--gold-soft); font-size: 0.82rem; padding: 6px 20px;
	display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.google-translator #close { cursor: pointer; order: 3; }
.google-translator #close img { height: 14px; width: auto; vertical-align: middle; }
.google-translator #google_translate_element { display: inline-block; }
@media (min-width:500px) {
.goog-te-gadget {display:flex;}
}
.goog-te-gadget, .goog-te-gadget a, .goog-te-gadget a:link, .goog-te-gadget a:active {color:var(--paper) !important;}
.goog-te-gadget select {margin-right:5px !important;}

/* ---------- Header ---------- */
header {
    top: 0;
    width: 100%;
}
header ul{
    list-style: none;
	padding-left:0;
	margin:0;
}
/* Logo */
.logo{
    display: inline-block;
    padding-top: 10px;
}
.logo img {
	max-width:200px;
}
/* Nav menu */
.nav{
    position: fixed;
	left: 10px;
    right: 10px;
    background-color: var(--aegean);
    overflow: hidden;
    z-index: 2;
}
.menu a{
    display: block;
    padding: 12px 25px;
    border-bottom: 1px solid var(--aegean-mid);
    color: #fff;	
}
.menu li:last-child a {border:none}
.menu a:hover{
    background-color: var(--teal);
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
/* Menu Icon */
.hamb{
    cursor: pointer;
    float: right;
    padding: 35px 20px;
}/* Style label tag */

.hamb-line {
    background: var(--wine);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background:var(--wine);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height:fit-content;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

body:has(.side-menu:checked) {
  overflow: hidden;
}
@media (max-width: 767px) {
	.nav{
		box-shadow: var(--shadow);
	}
}
@media (max-width: 992px) {
	.logo img {
			max-width:170px;
			height:auto
		}
}
/* Responsiveness */
@media (min-width: 768px) {	
    .nav{
        max-height: none;
		margin-top: 15px;
        margin-right: 10px;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }
    .menu li{
        float: left;
    }
	.menu a{
        background-color: transparent;
        color:var(--wine);
		border:none;
		padding: 10px 25px;
		transition: all 0.5s ease 0s;
    }
    .menu a:hover, .menu a.active {
        background:var(--aegean);
        color:#fff;
		transition: all 0.5s ease 0s;
		border-radius:var(--radius-pill)
    }

    .hamb{
        display: none;
    }
}
@media (min-width:768px) and (max-width: 992px) {
	.menu a{
		font-size:0.8rem;
		padding: 10px 15px;
    }
}

/* ---------- Hero ---------- */
.hero {
	position: relative; margin: 6px 0 14px; padding: 60px 48px;
	border-radius: 34px; overflow: hidden; color: #fff;
	background: linear-gradient(140deg, #2a1450 0%, #4b2e83 48%, #7b3fb8 100%);
	box-shadow: var(--shadow);
}
.hero::before {
	content: ""; position: absolute; inset: 0;
	background:
	  radial-gradient(circle at 82% 22%, rgba(243, 198, 77, 0.4), transparent 34%),
	  radial-gradient(circle at 12% 88%, rgba(31, 182, 166, 0.34), transparent 38%),
	  radial-gradient(circle at 60% 10%, rgba(255, 94, 108, 0.22), transparent 30%);
	pointer-events: none;
}
.hero .floaties { position: absolute; inset: 0; pointer-events: none; }
.hero .floaties span {
	position: absolute; font-size: 1.6rem; opacity: 0.5;
	animation: bob 6s ease-in-out infinite;
}
.hero .floaties span:nth-child(1) { top: 16%; left: 78%; animation-delay: 0s; }
.hero .floaties span:nth-child(2) { top: 62%; left: 88%; animation-delay: 1.4s; font-size: 1.2rem; }
.hero .floaties span:nth-child(3) { top: 30%; left: 92%; animation-delay: 2.6s; font-size: 1rem; }
.hero .floaties span:nth-child(4) { top: 78%; left: 70%; animation-delay: 0.8s; font-size: 1.3rem; }
@keyframes bob { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-14px) rotate(6deg);} }

.hero-inner { position: relative; max-width: 700px; }
.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--plum-deep); background: var(--gold);
	padding: 7px 15px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 {
	font-family: 'Fraunces', Georgia, serif; font-weight: 900;
	font-size: clamp(2.3rem, 5.2vw, 3.8rem); line-height: 1.02; margin: 0 0 18px; letter-spacing: -0.015em;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p { font-size: 1.12rem; color: rgba(255,255,255,0.92); margin: 0 0 28px; max-width: 580px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
	display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.96rem;
	padding: 14px 26px; border-radius: 999px; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary { background: var(--gold); color: var(--plum-deep); box-shadow: 0 12px 28px -10px rgba(243,198,77,0.9); }
.btn-primary:hover { transform: translateY(-3px); }
.btn-ghost { background: rgba(255,255,255,0.13); color: #fff; border: 1px solid rgba(255,255,255,0.38); }
.btn-ghost:hover { background: rgba(255,255,255,0.24); transform: translateY(-3px); }

/* Stat ribbon */
.ribbon {
display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 34px;
}
.ribbon .chip {
	flex: 1; min-width: 150px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
	padding: 16px 20px; box-shadow: var(--shadow-sm);
	display: flex; align-items: center; gap: 14px;
}
.ribbon .chip .ic {
	width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
	display: grid; place-items: center; font-size: 1.3rem; color: #fff;
}
.ribbon .chip:nth-child(1) .ic { background: var(--coral); }
.ribbon .chip:nth-child(2) .ic { background: var(--teal); }
.ribbon .chip:nth-child(3) .ic { background: var(--amber); }
.ribbon .chip strong { display: block; font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--plum-deep); line-height: 1; }
.ribbon .chip span { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 1fr 290px; gap: 40px; align-items: start; }

/* ---------- Intro prose ---------- */
.section-label {
font-family: 'Fraunces', serif;
font-weight: 900;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--plum-deep);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.section-sub { color: var(--ink-soft); margin: 0 0 26px; max-width: 640px; }
.lead { font-size: 1.06rem; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); }
.prose strong { color: var(--ink); }

/* Cluster */
  .cluster { margin: 0 0 34px; }
  .cluster-head {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  }
  .cluster-head .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
  .cluster-head h3 {
    font-family: 'Fraunces', serif; font-weight: 900; font-size: 1.3rem; color: var(--plum-deep); margin: 0;
  }
  .cluster-head .rule { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
  .c-indian .dot { background: var(--amber); }
  .c-fairy .dot { background: var(--grape); }
  .c-values .dot { background: var(--teal); }
  .c-everyday .dot { background: var(--sky); }
  .c-media .dot { background: var(--coral); }
/* ---------- Card grid ---------- */
.grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px;
  }
.card {
position: relative; display: flex; flex-direction: column; background: var(--paper);
border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card .thumb { aspect-ratio: 1 / 1; overflow: hidden; background: #efe6f5; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.card:hover .thumb img { transform: scale(1.08); }
.card .label { padding: 11px 13px; font-weight: 800; font-size: 0.9rem; color: var(--plum-deep); line-height: 1.28; }
.card .label small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
.card .tag {
position: absolute; top: 9px; left: 9px; z-index: 2;
font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--coral);
}
.card .tag.new { background: var(--teal); }
.card .tag.watch { background: var(--sky); }
.card .tag.listen { background: var(--grape); }
.card .tag.values { background: var(--amber); color: var(--plum-deep); }

.feature-img {
border-radius: var(--radius); box-shadow: var(--shadow);
display: block; margin: 16px auto 24px; max-width: 100%; height: auto;
}
.quick-links { text-align: center; margin: 24px 0; font-weight: 700; }
.quick-links a { padding: 0 6px; }


/* ---------- FAQ ---------- */
.faq { margin: 40px 0 10px; }
.faq details {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 4px 20px;
margin-bottom: 12px;
transition: box-shadow 0.2s ease;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
cursor: pointer;
font-weight: 800;
color: var(--plum-deep);
padding: 14px 0;
list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--coral); transition: transform 0.2s ease; }

.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--ink-soft); }

/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 22px; }
.panel-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
box-shadow: 0 8px 20px -16px rgba(46,26,82,0.4);
}
.panel-card h3, .panel-card .h3, .panel-card .section-head{
display: block;
font-family: 'Fraunces', serif;
font-size: 1.15rem;
margin: 0 0 14px;
font-weight: 600;
padding-bottom: 2px;
color: var(--plum-deep);
border-bottom: 1px solid var(--plum);
}
.panel-link { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line);transition: all 0.5s ease 0s; }
.panel-link:last-child { border-bottom: none; }
.panel-link img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.panel-link span { font-weight: 700; font-size: 0.9rem; color: var(--plum-deep); line-height: 1.3;transition: all 0.5s ease 0s;  }
.panel-link:hover span {padding-left:5px;transition: all 0.5s ease 0s; }
.panel-card .discover-list a { display: block; padding: 7px 0; font-weight: 700; font-size: 0.92rem; border-bottom: 1px dashed var(--line);transition: all 0.5s ease 0s; }
.panel-card .discover-list a:last-child { border-bottom: none; }
.panel-card .discover-list a:hover { color: var(--coral); padding-left:10px; transition: all 0.5s ease 0s; }
.panel-card br {display:none}

.newsletter {
background: linear-gradient(135deg, var(--teal), #1f9c91);
color: #fff; border: none;
}
.newsletter .h3 { color: #fff; border-color:#fff;}
.newsletter p { font-size: 0.86rem; opacity: 0.92; margin: 0 0 14px; }
.newsletter input[type=text], .newsletter input[type=email] {
width: 100%; padding: 11px 14px; border-radius: 12px; border: none;
font-family: inherit; font-size: 0.92rem; margin-bottom: 10px;
}
.newsletter input[type=submit] {
width: 100%; padding: 11px; border-radius: 12px; border: none;
background: var(--gold); color: var(--plum-deep); font-weight: 800; font-family: inherit;
cursor: pointer; transition: transform 0.2s ease;
}
.newsletter input[type=submit]:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */
.site-foot {
margin-top: 48px;
background: var(--plum-deep);
color: rgba(255,255,255,0.9);
border-radius: 30px 30px 0 0;
padding: 40px 0 28px;
}
.site-foot .Kdsgn-Search {display:none}
.site-foot .Kdsgn-Sections {
background:none;
width:unset;
border:none;
}
.site-foot .h3, .site-foot .foot-head { border-bottom: 2px solid var(--plum);display:block; text-align:center;font-family: 'Fraunces', serif; color: var(--gold); font-size: 1.3rem; margin: 0 0 16px; font-weight:600 }
.foot-sections ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 18px;
}

.foot-sections a { color: rgba(255,255,255,0.82); font-weight: 600; font-size: 0.9rem; }
.foot-sections a:hover { color: var(--gold); }
.foot-bottom { text-align: center; margin-top: 26px; font-size: 0.82rem; opacity: 0.6; }
.foot-sections .bann-wrap {background:rgba(255,255,255,0.85); padding:10px; margin:15px 0; border-radius:15px}
@media (max-width: 880px) {
	.layout { grid-template-columns: 1fr; }
	.sidebar { position: static; }
	.hero { padding: 40px 26px;width:100% }
	.site-head { flex-direction: column; align-items: flex-start; }
}