/* ===== Epic Essay • Sample Details (Clean) =============================== */
:root{
    --ink:#0f172a; --muted:#667085; --line:rgba(15,23,42,.10);
    --bg1:#f7f9ff; --bg2:#eef3ff; --card:#fff;
    --primary-600:#2563eb; --primary-700:#1e47d7;
    --accent-500:#ff7a45; --accent-600:#ff8e66;
    --radius:18px; --radius-lg:22px;
    --shadow:0 14px 40px rgba(2,6,23,.10);
}

.page{background:linear-gradient(180deg,var(--bg2),var(--bg1)); padding:40px 0 64px}
.wrap{width:min(1200px,92vw); margin:auto}

/* Header strip */
.page-head{ text-align:center; margin-bottom:18px }
.page-head h1{ margin:0; font-size:clamp(28px,4.2vw,52px); color:#0d1b3b; font-weight:900 }
.consent{
    display:inline-flex; gap:8px; align-items:center; margin-top:12px;
    padding:8px 14px; border-radius:999px; background:#e9fbef; color:#0b6b3b; font-weight:800; border:1px solid rgba(16,185,129,.25)
}
.consent .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}

/* Layout */
.grid{display:grid; gap:18px; grid-template-columns: 1.6fr .9fr}
@media (max-width:980px){ .grid{grid-template-columns:1fr} }

/* Card (left) */
.paper{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); padding:22px;
}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-weight:800}
.pill.type{background:#eef5ff;border:1px solid rgba(37,99,235,.22); color:#1343b0}
.pill.rate{background:#fff5ec;border:1px solid rgba(255,122,69,.25); color:#9a3a07}

.title{margin:0 0 12px; font-weight:900; color:var(--ink); font-size:clamp(22px,2.4vw,34px); line-height:1.2}

.meta{display:flex; gap:18px; flex-wrap:wrap; color:#334155; font-weight:800; margin-bottom:10px}
.meta .sep{opacity:.35}

.tags{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; padding:0; list-style:none}
.tags li{background:#f3f6ff; color:#334155; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px}

.h2{margin:14px 0 6px; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:#475569; font-weight:900}
.abstract{color:var(--muted); line-height:1.55; margin:0 0 16px}

.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
    display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px;
    text-decoration:none; font-weight:800; border:1px solid transparent; transition:.25s;
}
.btn i{font-style:normal}
.btn-primary{background:linear-gradient(135deg,var(--primary-600),var(--primary-700)); color:#fff}
.btn-outline{background:#fff; color:#0f2a5a; border-color:rgba(37,99,235,.30)}
.btn-outline:hover{background:#f6f9ff}

/* Right column cards */
.aside-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:var(--shadow); padding:18px;
}
.aside-card h3{margin:0 0 12px; font-size:1.05rem; font-weight:900; color:#0f2a5a}
.kv{display:grid; gap:10px}
.kv div{display:flex; justify-content:space-between; gap:10px}
.kv .k{color:#64748b; font-weight:800}
.kv .v{color:#0f172a; font-weight:800}

.cta-box{background:#eef7ff; border:1px solid rgba(37,99,235,.20); border-radius:16px; padding:16px}
.cta-title{font-weight:900; margin:0 0 4px}
.cta-text{color:#4b5563; margin:0 0 12px}
.btn-green{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:999px; text-decoration:none; font-weight:900; background:linear-gradient(135deg,#16a34a,#0f9b39); color:#fff}

/* Related list */
.related{margin-top:18px}
.related h2{font-size:1.25rem; font-weight:900; color:#0f2a5a; margin:0 0 10px}
.rels{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .rels{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .rels{grid-template-columns:1fr} }
.rel{
    background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
    padding:16px; display:flex; flex-direction:column; gap:10px
}
.rel .row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rel .title{font-size:1.05rem; line-height:1.22}
.rel .chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:#f3f6ff; border:1px solid #e2e8f0; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; color:#334155}
.rel .view{margin-top:auto; display:inline-flex; align-items:center; gap:8px; background:#f6f9ff; border:1px solid rgba(37,99,235,.25); color:#0f2a5a; border-radius:12px; padding:10px 12px; text-decoration:none; font-weight:800}