:root {
    --bg: #0d0d13;
    --bg-soft: #15141d;
    --panel: rgba(26,24,34,.92);
    --panel-2: #211d2a;
    --gold: #d2ad62;
    --gold-soft: #f0d89a;
    --wine: #54263a;
    --green: #173e35;
    --text: #f5efe2;
    --muted: #b9af9c;
    --line: rgba(210,173,98,.26);
    --shadow: 0 20px 60px rgba(0,0,0,.35);
}
* {box-sizing:border-box;}
html {min-height:100%;}
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    background-image: url('/top.png'), linear-gradient(180deg, #160e14 0, #160e14 410px, rgba(25,16,24,.85) 470px, rgba(25,16,24,.4) 540px, transparent 620px), radial-gradient(circle at 15% 10%, rgba(84,38,58,.28), transparent 33%), radial-gradient(circle at 85% 20%, rgba(23,62,53,.25), transparent 28%), linear-gradient(180deg, #0b0b10, var(--bg));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top center, top left, top left, top left, top left;
    padding-top: 137px;
    background-size: auto 230px, auto, auto, auto, auto;
}
body:before {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.13;
    background-image:
        radial-gradient(circle at 20px 30px, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 140px 90px, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 250px 180px, #fff 0 1px, transparent 1.4px);
    background-size:320px 240px;
}
a {color:inherit;text-decoration:none;}
.wrap {width:min(1240px, calc(100% - 32px));margin:0 auto;}
.hero {padding:62px 0 30px;text-align:center;}
.eyebrow {font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);}
h1 {margin:12px 0 10px;font-size:clamp(38px,7vw,82px);font-weight:500;line-height:1.1;}
.hero p {max-width:700px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.7;}
.section-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px;
    padding:0px 0 70px;
}
.section-card {
    position:relative;
    min-height:330px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--panel);
    box-shadow:var(--shadow);
    transition:transform .25s ease,border-color .25s ease;
}
.section-card:hover {transform:translateY(-5px);border-color:rgba(240,216,154,.65);}
.section-card img {width:100%;height:230px;display:block;object-fit:cover;filter:saturate(.84) contrast(1.04);}
.section-card .fallback {
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 40%, rgba(240,216,154,.12), transparent 30%),
        linear-gradient(135deg, #2e2434, #142b28);
    font-size:68px;
    color:var(--gold-soft);
}
.section-card .content {padding:18px 20px 22px;}
.section-card h2 {margin:0 0 7px;font-size:24px;font-weight:500;}
.section-card p {margin:0;color:var(--muted);font-size:14px;line-height:1.55;}
.topbar {
    margin-top: 100px;
    padding: 12px 0 12px 0;
    border-bottom: 1px solid var(--line);
    background: rgba(9,9,14,.72);
    backdrop-filter: blur(14px);
}
.topbar .row {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand {font-size:20px;color:var(--gold-soft);}
.back {color:var(--muted);font-size:14px;}
.page-head {padding:42px 0 25px;}
.page-head h1 {font-size:clamp(36px,6vw,64px);margin:0 0 12px;}
.page-head p {max-width:760px;color:var(--muted);line-height:1.65;}
.cards-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:18px;
    padding:8px 0 70px;
}
.tarot-card {
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--panel);
    transition:transform .2s ease,border-color .2s ease;
}
.tarot-card:hover {transform:translateY(-4px);border-color:rgba(240,216,154,.6);}
.tarot-card .image {
    aspect-ratio:2/3;
    background:linear-gradient(145deg,#251e2b,#132822);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:34px;
}
.tarot-card img {width:100%;height:100%;display:block;object-fit:cover;}
.tarot-card .name {padding:13px 12px 15px;text-align:center;font-size:15px;line-height:1.3;}
.card-view {display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:48px;padding:44px 0 80px;align-items:start;}
.card-image {
    overflow:hidden;
    border-radius:22px;
    border:1px solid var(--line);
    background:var(--panel);
    box-shadow:var(--shadow);
}
.card-image img {width:100%;display:block;}
.card-image .fallback {aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;font-size:70px;color:var(--gold);background:linear-gradient(145deg,#251e2b,#132822);}
.card-copy h1 {font-size:clamp(40px,6vw,70px);margin:0 0 22px;}
.card-copy .text {font-family:Arial,sans-serif;font-size:17px;line-height:1.72;color:#ece5d7;}
.card-copy .text h2,.card-copy .text h3 {font-family:Georgia,serif;color:var(--gold-soft);}
.empty {padding:40px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center;}
.footer {padding:35px 0 55px;text-align:center;color:#857d70;font-size:12px;}
@media (max-width:900px) {
    .section-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .card-view {grid-template-columns:1fr;gap:28px;}
    .card-image {max-width:420px;margin:0 auto;width:100%;}
}
@media (max-width:580px) {
    .wrap {
        width: min(100% - 20px,1240px);
    }

    .topbar .wrap {
        padding-top: 0;
    }
    .hero {
        padding-top: 62px;
    }
    .section-grid {grid-template-columns:1fr;gap:15px;}
    .section-card {min-height:auto;}
    .section-card img,.section-card .fallback {height:210px;}
    .cards-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}