:root{
        --bg:#0b0d10;
        --panel:#12151a;
        --muted:#9aa4b2;
        --text:#e8eef6;
        --brand:#60a5fa;
        --brand-hover:#93c5fd;
        --ring:#38bdf8;

        /* cover size requested */
        --card-w: 300px; /*294*/
        --cover-h: 300px; /*470*/
        --img-h: 300px;
        --card-radius: 16px;
    }

    /* Page */
    html,body{background:var(--bg); color:var(--text); margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;}
    .wrap{max-width:1200px; margin:auto; padding:32px 20px;}

    /* Header */
    h1{margin:0 0 20px; font-weight:700; letter-spacing:.2px;}
    .sub{color:var(--muted); margin:6px 0 24px; font-size:.95rem;}

    /* Link utility (dark-friendly) */
    .link{color:var(--brand); text-decoration:none; transition:color .2s ease,text-decoration-color .2s ease;}
    .link:hover{color:var(--brand-hover); text-decoration:underline; text-decoration-color:var(--brand-hover);}
    .link:focus{outline:2px solid var(--ring); outline-offset:2px; border-radius:3px;}

    /* Grid */
    .books-grid{
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
        gap:20px;
    }

    /* Card */
    .book-card{
        background:var(--panel);
        width: var(--card-w); 
        border:1px solid #1b212a;
        border-radius:var(--card-radius);
        overflow:hidden;
        box-shadow:0 4px 18px rgba(0,0,0,.35);
        display:flex;
        flex-direction:column;
        transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    }
    .book-card:hover{
        transform:translateY(-2px);
        box-shadow:0 8px 24px rgba(0,0,0,.45);
        border-color:#263141;
    }

    /* Cover area */
    .cover-wrap{
        width: var(--card-w);
        height: var(--cover-h);    /* fixed box height so card doesn't shrink */
        background:#0a0e13;
        display:flex;
        align-items:flex-start;    /* top-align the image */
        justify-content:center;
        overflow:hidden;   
    }
    .cover{
        height: var(--img-h);      /* 400px */
        width: auto;               /* preserve aspect ratio */
        object-fit: cover;         /* safe if exact ratio varies */
        object-position: top;
        display:block;
    }

    /* Meta */
    .meta{
        padding:14px 14px 16px;
        display:flex; flex-direction:column; gap:8px;
    }
    .title{
        margin:0;
        font-size:1rem; line-height:1.35; font-weight:650;
    }
    .author{
        color:var(--muted);
        font-size:.92rem;
    }
    .price-row{
        display:flex; align-items:center; justify-content:space-between; gap:10px;
        margin-top:2px;
    }
    .price{
        font-weight:700;
    }

    /* CTA */
    .cta{
        display:inline-block;
        border:1px solid #2b3647;
        background:#0f1319;
        padding:8px 12px;
        border-radius:10px;
        font-weight:600;
        font-size:.95rem;
        text-decoration:none;
        color:var(--brand);
        text-align:center;
        transition:background .15s ease, border-color .15s ease, color .15s ease;
    }
    .cta:hover{ background:#121926; border-color:#3b4c66; color:var(--brand-hover); }
    .cta:focus{ outline:2px solid var(--ring); outline-offset:2px; }

    /* Make it breathe on small screens */
    @media (max-width: 680px){
        :root{ --cover-w: 220px; --cover-h: 352px; } /* scale covers down, keep aspect */
        .books-grid{ gap:16px; }
    }