/* ============================================================
   d2d Youth Elite Club — Platinum-tone styling
   ============================================================ */

.ye-dir, .ye-join, .ye-demo {
	--ye-ink:#0a0a0d;
	--ye-ink-2:#141420;
	--ye-red:#d81f24;
	--ye-red-ink:#ad1419;
	--ye-gold:#c9a769;
	--ye-gold-2:#e4c58a;
	--ye-silver:#d4b86a;
	--ye-gold-lt:#f0dfa8;
	--ye-gold-dp:#b8994a;
	--ye-line:rgba(255,255,255,.09);
	--ye-mute:rgba(255,255,255,.55);
	font-family:'Archivo',sans-serif;
	color:#f4f4f6;
	box-sizing:border-box;
}
.ye-dir *, .ye-join *, .ye-demo * { box-sizing:border-box; }

.ye-kicker { display:block; font-weight:800; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ye-silver); margin-bottom:8px; }
.ye-dot { color:var(--ye-silver); }
.ye-hero-title {
	font-family:'Playfair Display','Archivo',serif;
	font-weight:900;
	font-size:clamp(36px,5.5vw,72px);
	letter-spacing:-.02em;
	line-height:1.02;
	margin:0 0 16px;
	color:#fff;
}
.ye-hero-sub { color:rgba(255,255,255,.72); font-size:clamp(15px,1.4vw,17.5px); line-height:1.6; max-width:640px; margin:0 0 24px; }

.ye-btn {
	display:inline-flex; align-items:center; gap:8px;
	font-family:inherit; font-weight:800; font-size:14px;
	padding:12px 24px; border-radius:999px;
	text-decoration:none; border:1.5px solid var(--ye-line);
	background:rgba(255,255,255,.04); color:#fff; cursor:pointer;
	transition:all .2s;
}
.ye-btn:hover { border-color:var(--ye-silver); color:var(--ye-silver); background:rgba(212,184,106,.06); }
.ye-btn--primary { background:var(--ye-red); border-color:var(--ye-red); color:#fff; box-shadow:0 12px 28px rgba(216,31,36,.32); }
.ye-btn--primary:hover { background:var(--ye-red-ink); border-color:var(--ye-red-ink); color:#fff; transform:translateY(-1px); }
.ye-btn--gold { background:var(--ye-gold); border-color:var(--ye-gold); color:#0b0b0e; }
.ye-btn--gold:hover { background:var(--ye-gold-2); border-color:var(--ye-gold-2); color:#0b0b0e; transform:translateY(-1px); }
.ye-btn--sm { padding:9px 16px; font-size:12.5px; }
.ye-btn--big { padding:16px 32px; font-size:15.5px; }

.ye-mono { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg,#9c7f38,#f0dfa8); color:#1c1f24; font-family:'Playfair Display',serif; font-weight:900; font-size:2.4em; }

/* ============================================================
   PUBLIC DIRECTORY
   ============================================================ */
.ye-dir {
	background:radial-gradient(1200px 800px at 15% 10%,rgba(216,31,36,.10),transparent 60%),
	           radial-gradient(1000px 600px at 85% 90%,rgba(212,184,106,.08),transparent 55%),
	           linear-gradient(180deg,#0a0a0d 0%,#050508 100%);
	padding:80px 22px 100px;
	min-height:100vh;
}
.ye-dir-inner { max-width:1200px; margin:0 auto; }
.ye-dir-head { text-align:center; margin-bottom:60px; }
.ye-dir-head .ye-hero-sub { margin-left:auto; margin-right:auto; }
.ye-dir-stats { display:flex; justify-content:center; gap:56px; margin-top:32px; flex-wrap:wrap; }
.ye-dir-stats > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ye-dir-stats b { font-family:'Playfair Display',serif; font-weight:900; font-size:36px; color:var(--ye-silver); letter-spacing:-.01em; }
.ye-dir-stats span { font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ye-mute); }

.ye-featured {
	background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
	border:1px solid var(--ye-line);
	border-radius:20px;
	padding:36px;
	display:grid;
	grid-template-columns:200px minmax(0,1fr);
	gap:36px;
	align-items:center;
	margin-bottom:56px;
	position:relative;
	overflow:hidden;
}
.ye-featured::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 60%,rgba(212,184,106,.08) 100%); }
.ye-featured-photo { position:relative; width:200px; height:200px; border-radius:50%; overflow:hidden; border:3px solid rgba(212,184,106,.5); box-shadow:0 20px 40px rgba(0,0,0,.5); }
.ye-featured-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ye-featured-body { position:relative; }
.ye-featured-rank { display:inline-block; font-family:'Playfair Display',serif; font-style:italic; font-size:22px; color:var(--ye-silver); margin-bottom:8px; }
.ye-featured h2 { font-family:'Playfair Display','Archivo',serif; font-weight:900; font-size:clamp(30px,3.5vw,44px); color:#fff; margin:0 0 12px; letter-spacing:-.01em; line-height:1.1; }
.ye-featured-meta { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.ye-featured-meta span { padding:5px 12px; background:rgba(212,184,106,.14); color:var(--ye-silver); border-radius:999px; font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

.ye-list-title { font-family:'Playfair Display',serif; font-weight:700; font-size:22px; color:#fff; margin:0 0 20px; letter-spacing:-.01em; border-bottom:1px solid var(--ye-line); padding-bottom:16px; }
.ye-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:60px; }
.ye-card {
	background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
	border:1px solid var(--ye-line);
	border-radius:16px;
	padding:24px 20px;
	position:relative;
	transition:transform .25s,border-color .25s,box-shadow .25s;
	overflow:hidden;
}
.ye-card.has-link { cursor:pointer; }
.ye-card:hover { transform:translateY(-4px); border-color:var(--ye-silver); box-shadow:0 20px 40px -10px rgba(212,184,106,.2); }
.ye-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 65%,rgba(212,184,106,.06) 100%); }
.ye-card-rank { position:absolute; top:16px; right:20px; font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--ye-silver); opacity:.7; }
.ye-card-photo { position:relative; width:72px; height:72px; border-radius:50%; overflow:hidden; margin-bottom:16px; border:2px solid rgba(212,184,106,.35); }
.ye-card-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ye-card-body { position:relative; }
.ye-card h4 { font-family:'Playfair Display','Archivo',serif; font-weight:800; font-size:19px; color:#fff; margin:0 0 8px; line-height:1.25; letter-spacing:-.005em; }
.ye-card-cat { display:block; font-weight:800; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ye-silver); margin-bottom:12px; }
.ye-card-read { font-weight:800; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.7; }
.ye-card:hover .ye-card-read { opacity:1; color:var(--ye-silver); }

.ye-empty { text-align:center; padding:80px 20px; color:var(--ye-mute); font-size:14px; background:rgba(255,255,255,.02); border:1px dashed var(--ye-line); border-radius:20px; }
.ye-dir-foot { text-align:center; padding-top:20px; color:var(--ye-mute); font-size:13px; }
.ye-dir-foot a { color:var(--ye-silver); border-bottom:1px solid var(--ye-silver); text-decoration:none; }

/* ============================================================
   JOIN PAGE (self-serve)
   ============================================================ */
.ye-join {
	background:radial-gradient(1000px 700px at 20% 15%,rgba(216,31,36,.10),transparent 55%),
	           radial-gradient(900px 500px at 85% 90%,rgba(212,184,106,.08),transparent 55%),
	           linear-gradient(180deg,#0a0a0d 0%,#050508 100%);
	padding:70px 22px 100px;
	min-height:100vh;
}
.ye-join-inner { max-width:720px; margin:0 auto; }
.ye-join .ye-hero-title { text-align:center; }
.ye-join .ye-hero-sub { text-align:center; margin:0 auto 40px; }

.ye-join-steps { list-style:none; padding:0; margin:0 0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ye-join-steps li {
	background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
	border:1px solid var(--ye-line);
	border-radius:14px;
	padding:20px 18px;
	text-align:center;
	position:relative;
	transition:border-color .2s;
}
.ye-join-steps li.is-current { border-color:var(--ye-silver); background:linear-gradient(180deg,rgba(212,184,106,.10),rgba(212,184,106,.02)); }
.ye-join-steps li.is-done { border-color:rgba(126,191,143,0.4); }
.ye-join-steps li.is-done .ye-step-n { background:rgba(126,191,143,0.4); color:#fff; }
.ye-join-steps li.is-done .ye-step-n::after { content:"✓"; }
.ye-join-steps li.is-done .ye-step-n span { display:none; }
.ye-step-n {
	display:inline-flex; align-items:center; justify-content:center;
	width:32px; height:32px; border-radius:50%;
	background:rgba(255,255,255,.06);
	color:var(--ye-silver);
	font-family:'Playfair Display',serif; font-weight:900; font-size:15px;
	margin-bottom:10px;
}
.ye-join-steps b { display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:15px; color:#fff; margin-bottom:4px; }
.ye-join-steps i { font-style:normal; display:block; color:var(--ye-mute); font-size:12px; font-weight:600; }

.ye-join-cta { text-align:center; margin:32px 0; }
.ye-join-mini { color:var(--ye-mute); font-size:12.5px; margin:14px 0 0; font-style:italic; }

/* Search UI */
.ye-join-search label > span { display:block; margin-bottom:10px; color:var(--ye-mute); font-size:13px; letter-spacing:.02em; }
.ye-join-search label > span b { color:#fff; font-weight:800; }
.ye-join-q {
	width:100%;
	font-family:inherit; font-size:17px;
	padding:16px 20px;
	border:1.5px solid var(--ye-line);
	border-radius:14px;
	background:rgba(0,0,0,.32);
	color:#fff;
	margin-bottom:18px;
}
.ye-join-q:focus { border-color:var(--ye-silver); outline:none; background:rgba(0,0,0,.5); }
.ye-join-q::placeholder { color:rgba(255,255,255,.32); }

.ye-join-results { display:flex; flex-direction:column; gap:10px; }
.ye-join-result {
	display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:16px; align-items:center;
	background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
	border:1px solid var(--ye-line);
	border-radius:12px;
	padding:14px 16px;
	transition:border-color .2s, transform .2s;
}
.ye-join-result:hover { border-color:var(--ye-silver); transform:translateY(-1px); }
.ye-join-result-thumb { width:56px; height:56px; border-radius:50%; overflow:hidden; border:1.5px solid rgba(212,184,106,.35); }
.ye-join-result-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ye-join-mono { display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg,#9c7f38,#f0dfa8); color:#1c1f24; font-family:'Playfair Display',serif; font-weight:900; font-size:22px; }
.ye-join-result-body { min-width:0; overflow:hidden; }
.ye-join-result-body b { display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:16px; color:#fff; margin-bottom:2px; }
.ye-join-result-body i { font-style:normal; display:block; color:rgba(255,255,255,.65); font-size:12.5px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ye-join-result-body span { display:block; color:var(--ye-mute); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.ye-join-pick { flex-shrink:0; }
.ye-join-empty { text-align:center; padding:30px; color:var(--ye-mute); font-size:14px; background:rgba(255,255,255,.02); border:1px dashed var(--ye-line); border-radius:12px; }

.ye-join-status { min-height:22px; margin-top:16px; text-align:center; font-weight:700; font-size:13.5px; color:var(--ye-mute); }
.ye-join-status.is-ok { color:#a6e0b8; }
.ye-join-status.is-err { color:#f5a5a7; }

.ye-join-foot { color:var(--ye-mute); font-size:12.5px; margin-top:32px; text-align:center; font-style:italic; }

/* Already-a-member state */
.ye-join-done .ye-hero-title, .ye-join-done .ye-hero-sub { text-align:center; }
.ye-join-done .ye-join-inner { text-align:center; }

/* ============================================================
   HOMEPAGE DEMO
   ============================================================ */
.ye-demo {
	background:radial-gradient(1200px 700px at 20% 20%,rgba(216,31,36,.10),transparent 55%),
	           radial-gradient(1000px 600px at 85% 85%,rgba(212,184,106,.08),transparent 55%),
	           linear-gradient(180deg,#0a0a0d 0%,#050508 100%);
	padding:80px 22px;
}
.ye-demo-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.ye-demo-text .ye-hero-title { font-size:clamp(32px,4vw,54px); }
.ye-demo-perks { list-style:none; margin:24px 0 32px; padding:0; display:flex; flex-direction:column; gap:10px; }
.ye-demo-perks li { color:rgba(255,255,255,.82); font-size:15px; font-weight:600; display:flex; align-items:center; gap:10px; }
.ye-demo-cta { display:flex; gap:12px; flex-wrap:wrap; }
.ye-demo-cardwrap { position:relative; }
.ye-demo-cardwrap::before { content:""; position:absolute; inset:-40px; z-index:0; background:radial-gradient(500px 300px at 50% 50%,rgba(212,184,106,.14),transparent 60%); filter:blur(30px); }
.ye-card-canvas {
	position:relative; z-index:1; width:100%; height:auto; display:block;
	border-radius:18px;
	box-shadow:0 30px 60px -10px rgba(0,0,0,.7), 0 20px 40px -12px rgba(212,184,106,.18);
	transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.ye-demo-cardwrap:hover .ye-card-canvas { transform:perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-4px); }

/* ============================================================
   SHARE-STORY BANNER
   ============================================================ */
.ye-banner {
	display:flex; align-items:center; gap:20px;
	background:linear-gradient(135deg,rgba(10,10,13,.98) 0%,rgba(20,20,32,.95) 100%);
	border:1px solid rgba(212,184,106,.32);
	border-radius:16px;
	padding:20px 24px;
	margin:32px auto;
	max-width:720px;
	position:relative;
	overflow:hidden;
}
.ye-banner::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 55%,rgba(212,184,106,.08) 100%); }
.ye-banner-icon { position:relative; font-size:32px; color:var(--ye-silver); flex:0 0 auto; }
.ye-banner-body { position:relative; flex:1; min-width:0; color:#fff; }
.ye-banner-body b { display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:16px; line-height:1.3; margin-bottom:4px; }
.ye-banner-body p { color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.5; margin:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px) {
	.ye-dir { padding:50px 18px 70px; }
	.ye-dir-stats { gap:32px; }
	.ye-featured { grid-template-columns:1fr; text-align:center; padding:24px; }
	.ye-featured-photo { margin:0 auto; width:140px; height:140px; }
	.ye-featured-meta { justify-content:center; }
	.ye-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
	.ye-join { padding:40px 16px 70px; }
	.ye-join-steps { grid-template-columns:1fr; gap:8px; }
	.ye-join-steps li { display:flex; align-items:center; text-align:left; gap:14px; padding:14px 16px; }
	.ye-join-steps .ye-step-n { margin-bottom:0; flex-shrink:0; }
	.ye-join-steps b { margin-bottom:0; }
	.ye-join-result { grid-template-columns:56px minmax(0,1fr); }
	.ye-join-pick { grid-column:1 / -1; }
	.ye-demo { padding:50px 18px; }
	.ye-demo-inner { grid-template-columns:1fr; gap:36px; }
	.ye-card-canvas { transform:none; }
	.ye-banner { flex-direction:column; align-items:flex-start; text-align:left; }
	.ye-banner-icon { font-size:24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ye-card:hover, .ye-btn--primary:hover, .ye-btn--gold:hover, .ye-demo-cardwrap:hover .ye-card-canvas, .ye-join-result:hover { transform:none !important; transition:none !important; }
}