@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap");

.sl-membership {
    --sl-ui: "DM Sans", "Noto Sans Sinhala", system-ui, sans-serif;
    --sl-display: "Playfair Display", "Noto Serif Sinhala", "Noto Sans Sinhala", Georgia, serif;
    --sl-plum: #301728;
    --sl-berry: #95194e;
    --sl-rule: #e2d3da;
}
.sl-membership :is(.sl-novel-hub,.sl-series-page,.sl-reader-hub) {
    font-family: var(--sl-ui);
    line-height: 1.65;
}
.sl-membership :is(.sl-feature-story,.sl-pass-campaign,.sl-series-heading) h1,
.sl-membership :is(.sl-pass-campaign,.sl-recent-novels,.sl-novel-hub) h2,
.sl-membership .sl-offer h1 {
    font-family: var(--sl-display);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.2;
}
.sl-membership .sl-editorial-label {
    margin: 0 0 .85rem;
    font: 700 .78rem/1.4 var(--sl-ui);
    color: #84264f;
}
.sl-feature-story {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    background: var(--sl-plum);
    color: #fff9f5;
    overflow: hidden;
    border-radius: .85rem;
}
.sl-feature-copy { align-self: center; padding: clamp(1.4rem, 4vw, 3.5rem); }
.sl-membership .sl-feature-copy :is(h1,p) { color: inherit; }
.sl-membership .sl-feature-copy .sl-editorial-label { color: #fac3da; }
.sl-membership .sl-feature-story h1 { font-size: clamp(2.35rem,5vw,4.5rem); margin: 0 0 .75rem; }
.sl-feature-art { min-width: 0; display: grid; place-items: center; background: #23121f; }
.sl-feature-art img { display: block; width: 100%; height: auto; object-fit: contain; }
.sl-feature-art:empty { display: none; }
.sl-feature-copy:has(+ .sl-feature-art:empty) { grid-column: 1 / -1; }
.sl-membership .sl-feature-copy a.sl-novel-secondary { color: #fff9f5; }
.sl-membership .sl-cover-shelf article { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.sl-membership .sl-cover-shelf .sl-tile-cover { border-radius: .5rem; background: #ece0e6; }
.sl-membership .sl-cover-shelf img { background: transparent; }
.sl-membership .sl-cover-shelf h3 { padding: .75rem 0 .2rem; font-size: clamp(1rem,2vw,1.3rem); }
.sl-membership .sl-cover-shelf p { padding: 0; font-size: .95rem; }
.sl-pass-campaign {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    margin-block: clamp(2rem,5vw,4rem);
    padding: clamp(1.3rem,4vw,3rem);
    border-block: 1px solid var(--sl-rule);
    background: #f4e8ed;
    color: var(--sl-plum);
    overflow: hidden;
}
.sl-pass-has-art { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: clamp(1rem,4vw,3rem); }
.sl-membership .sl-pass-copy h2 { max-width: 15ch; margin: 0 0 .7rem; color: var(--sl-plum); font-size: clamp(1.95rem,4.4vw,3.65rem); text-wrap: balance; }
.sl-pass-copy p { margin: 0 0 1rem; }
.sl-pass-copy .sl-pass-terms { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; font-size: .9rem; }
.sl-pass-terms strong { font-size: 1.17rem; font-variant-numeric: tabular-nums; }
.sl-pass-copy a { gap: .5rem; }
.sl-pass-art { display: flex; align-items: center; justify-content: center; padding: 1.1rem .65rem; }
.sl-pass-art figure { flex: 0 1 44%; min-width: 0; position: relative; margin: 0; transform: rotate(-9deg); }
.sl-pass-art figure + figure { margin-inline-start: -14%; transform: rotate(8deg); }
.sl-pass-art figure:nth-child(2) { z-index: 1; transform: translateY(-9%) rotate(2deg); }
.sl-pass-art figure:nth-child(3) { transform: translateY(19%) rotate(12deg); }
.sl-pass-art img { display: block; width: 100%; height: auto; border-radius: .28rem; box-shadow: 0 14px 22px #30172836; }
.sl-membership .sl-update-grid a { border: 0; border-block-start: 1px solid var(--sl-rule); border-radius: 0; background: transparent; padding: .75rem 0; }
.sl-membership .sl-offer { background: var(--sl-plum); }
@media(max-width: 44rem) {
    .sl-feature-story { grid-template-columns: 1fr; }
    .sl-feature-art { grid-row: 1; }
    .sl-pass-has-art { grid-template-columns: minmax(0,1fr); }
    .sl-pass-art { grid-row: 1; width: min(100%,22rem); justify-self: center; padding-block: .7rem .9rem; }
}