/* =========================================================
   Soodino Release Notes — Modern Responsive UI
   Fluid typography, premium surfaces, dark/light compatible
   ========================================================= */

.release-page{
    --rel-bg:var(--bg,#050b14);
    --rel-surface:var(--surface,#0a1325);
    --rel-surface2:var(--surface2,#111d36);
    --rel-surface3:color-mix(in srgb,var(--rel-surface2) 78%,var(--rel-bg));

    --rel-line:var(--line,rgba(255,255,255,.075));
    --rel-line-strong:color-mix(in srgb,var(--rel-text) 12%,transparent);

    --rel-text:var(--text,#f7fafc);
    --rel-text-soft:color-mix(in srgb,var(--rel-text) 82%,transparent);
    --rel-muted:var(--muted,#91a3b7);

    --rel-accent:var(--cyan,#1de4bd);
    --rel-blue:var(--blue,#4ecbff);
    --rel-gold:var(--gold,#f8ce65);
    --rel-danger:#fb7185;

    --rel-radius-sm:.875rem;
    --rel-radius-md:1.25rem;
    --rel-radius-lg:1.75rem;
    --rel-radius-xl:2.25rem;

    --rel-shadow-sm:0 .5rem 1.5rem rgba(0,0,0,.10);
    --rel-shadow-md:0 1.25rem 4rem rgba(0,0,0,.17);
    --rel-shadow-lg:0 2rem 6rem rgba(0,0,0,.24);

    --rel-ease:cubic-bezier(.22,1,.36,1);

    position:relative;
    isolation:isolate;
    color:var(--rel-text);
    font-size:clamp(.9375rem,.91rem + .12vw,1rem);
    line-height:1.75;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.release-page *,
.release-page *::before,
.release-page *::after{
    box-sizing:border-box;
}

.release-page::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(circle at 82% 4%,color-mix(in srgb,var(--rel-accent) 8%,transparent),transparent 24rem),
            radial-gradient(circle at 8% 38%,color-mix(in srgb,var(--rel-blue) 5%,transparent),transparent 26rem);
    opacity:.9;
}

.release-wrap{
    width:min(calc(100% - clamp(1.25rem,4vw,3rem)),82rem);
    margin-inline:auto;
    padding-block:clamp(2.5rem,5vw,5rem) clamp(4rem,7vw,7rem);
}

/* =========================
   Hero
   ========================= */

.release-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(1.5rem,4vw,3.5rem);
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 9%,transparent);
    border-radius:clamp(1.5rem,2vw,2.25rem);
    background:
            linear-gradient(145deg,color-mix(in srgb,var(--rel-surface2) 88%,transparent),color-mix(in srgb,var(--rel-surface) 96%,transparent));
    box-shadow:var(--rel-shadow-md),inset 0 .0625rem 0 rgba(255,255,255,.04);
    backdrop-filter:blur(1.25rem) saturate(125%);
    -webkit-backdrop-filter:blur(1.25rem) saturate(125%);
}

.release-hero::before{
    content:"";
    position:absolute;
    inset:-30% -15% auto auto;
    width:clamp(14rem,32vw,30rem);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--rel-accent) 18%,transparent),transparent 68%);
    filter:blur(.25rem);
    pointer-events:none;
}

.release-hero::after{
    content:"";
    position:absolute;
    inset:auto auto -42% -12%;
    width:clamp(13rem,28vw,25rem);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--rel-blue) 12%,transparent),transparent 70%);
    pointer-events:none;
}

.release-kicker{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:.625rem;
    min-height:2rem;
    margin:0;
    color:var(--rel-accent);
    font-size:clamp(.78rem,.75rem + .1vw,.875rem);
    font-weight:800;
    letter-spacing:.01em;
}

.release-kicker::before{
    content:"";
    width:1.75rem;
    height:.125rem;
    border-radius:999rem;
    background:linear-gradient(90deg,var(--rel-accent),color-mix(in srgb,var(--rel-accent) 25%,transparent));
    box-shadow:0 0 1rem color-mix(in srgb,var(--rel-accent) 28%,transparent);
}

.release-title{
    position:relative;
    z-index:1;
    max-width:58rem;
    margin:clamp(.8rem,1.5vw,1.15rem) 0 0;
    color:var(--rel-text);
    font-size:clamp(2rem,1.35rem + 2.5vw,2.5rem);
    font-weight:900;
    letter-spacing:-.035em;
    line-height:1.35;
    text-wrap:balance;
}

.release-description{
    position:relative;
    z-index:1;
    max-width:52rem;
    margin:clamp(.9rem,1.5vw,1.25rem) 0 0;
    color:var(--rel-muted);
    font-size:clamp(.96rem,.91rem + .2vw,1.075rem);
    font-weight:500;
    line-height:2;
    text-wrap:pretty;
}

.release-summary-line{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:.625rem;
    margin-top:clamp(1.25rem,2.5vw,1.75rem);
}

.release-summary-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:2.4rem;
    padding:.5rem .875rem;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:999rem;
    color:var(--rel-text-soft);
    background:color-mix(in srgb,var(--rel-surface2) 70%,transparent);
    box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.035);
    font-size:clamp(.78rem,.76rem + .08vw,.875rem);
    font-weight:700;
    white-space:nowrap;
    backdrop-filter:blur(.75rem);
    -webkit-backdrop-filter:blur(.75rem);
}

.release-summary-pill svg{
    width:1rem;
    height:1rem;
    flex:0 0 auto;
}

/* =========================
   Release cards
   ========================= */

.release-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(.875rem,1.75vw,1.35rem);
    margin-top:clamp(1.5rem,3vw,2.5rem);
}

.release-card{
    position:relative;
    display:flex;
    min-width:0;
    overflow:hidden;
    flex-direction:column;
    padding:clamp(1.15rem,2vw,1.6rem);
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:clamp(1.2rem,1.6vw,1.55rem);
    color:var(--rel-text);
    background:
            linear-gradient(155deg,color-mix(in srgb,var(--rel-surface2) 55%,transparent),transparent 55%),
            var(--rel-surface);
    box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.025),var(--rel-shadow-sm);
    text-decoration:none;
    transform:translateZ(0);
    transition:
            transform .32s var(--rel-ease),
            border-color .32s ease,
            box-shadow .32s ease,
            background .32s ease;
}

.release-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:.16rem;
    border-radius:inherit;
    background:linear-gradient(180deg,var(--rel-accent),transparent 82%);
    opacity:0;
    transition:opacity .3s ease;
}

.release-card::after{
    content:"";
    position:absolute;
    top:-4rem;
    right:-4rem;
    width:10rem;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,color-mix(in srgb,var(--rel-accent) 9%,transparent),transparent 70%);
    opacity:0;
    transform:scale(.8);
    transition:opacity .35s ease,transform .45s var(--rel-ease);
    pointer-events:none;
}

.release-card:hover{
    transform:translateY(-.35rem);
    border-color:color-mix(in srgb,var(--rel-accent) 24%,var(--rel-line));
    background:
            linear-gradient(155deg,color-mix(in srgb,var(--rel-accent) 5%,var(--rel-surface2)),transparent 58%),
            var(--rel-surface);
    box-shadow:var(--rel-shadow-md),inset 0 .0625rem 0 rgba(255,255,255,.04);
}

.release-card:hover::before,
.release-card:hover::after{
    opacity:1;
}

.release-card:hover::after{
    transform:scale(1);
}

.release-card.is-featured{
    border-color:color-mix(in srgb,var(--rel-gold) 28%,var(--rel-line));
    background:
            linear-gradient(150deg,color-mix(in srgb,var(--rel-gold) 5%,transparent),transparent 42%),
            var(--rel-surface);
}

.release-card.is-featured::before{
    background:linear-gradient(180deg,var(--rel-gold),transparent 82%);
    opacity:.75;
}

.release-card-top{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.625rem;
}

.release-version{
    display:inline-flex;
    align-items:center;
    min-height:2.2rem;
    padding:.4rem .75rem;
    border:.0625rem solid color-mix(in srgb,var(--rel-accent) 14%,transparent);
    border-radius:999rem;
    color:var(--rel-accent);
    background:color-mix(in srgb,var(--rel-accent) 8%,transparent);
    font-size:clamp(.78rem,.76rem + .08vw,.875rem);
    font-weight:900;
    letter-spacing:.015em;
}

.release-featured-badge{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--rel-gold);
    font-size:clamp(.76rem,.74rem + .08vw,.85rem);
    font-weight:800;
}

.release-featured-badge svg{
    width:.95rem;
    height:.95rem;
}

.release-card h2{
    position:relative;
    z-index:1;
    margin:clamp(.85rem,1.5vw,1.1rem) 0 0;
    color:var(--rel-text);
    font-size:clamp(1.05rem,.98rem + .28vw,1.25rem);
    font-weight:850;
    line-height:1.65;
    letter-spacing:-.015em;
    text-wrap:balance;
}

.release-card-summary{
    position:relative;
    z-index:1;
    display:-webkit-box;
    overflow:hidden;
    margin:.65rem 0 0;
    color:var(--rel-muted);
    font-size:clamp(.875rem,.84rem + .12vw,.95rem);
    font-weight:500;
    line-height:1.95;
    text-wrap:pretty;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.release-card-meta{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem .9rem;
    margin-top:auto;
    padding-top:1.15rem;
    color:color-mix(in srgb,var(--rel-muted) 92%,transparent);
    font-size:clamp(.76rem,.74rem + .08vw,.85rem);
    font-weight:600;
}

.release-card-meta span,
.release-card-meta time{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.release-card-meta svg{
    width:.95rem;
    height:.95rem;
    opacity:.85;
}

.release-card-more{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-top:1.05rem;
    padding-top:.95rem;
    border-top:.0625rem solid color-mix(in srgb,var(--rel-text) 7%,transparent);
    color:var(--rel-accent);
    font-size:clamp(.8rem,.77rem + .09vw,.875rem);
    font-weight:800;
}

.release-card-more svg{
    width:1rem;
    height:1rem;
    transition:transform .3s var(--rel-ease);
}

.release-card:hover .release-card-more svg{
    transform:translateX(-.25rem);
}

/* =========================
   Empty state
   ========================= */

.release-empty,
.release-detail-empty{
    grid-column:1/-1;
    display:flex;
    min-height:clamp(10rem,18vw,14rem);
    align-items:center;
    justify-content:center;
    gap:.65rem;
    padding:2rem;
    border:.0625rem dashed color-mix(in srgb,var(--rel-text) 10%,transparent);
    border-radius:var(--rel-radius-md);
    color:var(--rel-muted);
    background:color-mix(in srgb,var(--rel-surface) 75%,transparent);
    font-size:clamp(.875rem,.84rem + .1vw,.95rem);
}

.release-empty svg,
.release-detail-empty svg{
    width:1.2rem;
    height:1.2rem;
}

/* =========================
   Pagination
   ========================= */

.release-pagination{
    display:flex;
    justify-content:center;
    margin-top:clamp(1.75rem,4vw,3rem);
}

.release-pagination .pagination{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    justify-content:center;
    margin:0;
    padding:0;
    list-style:none;
}

.release-pagination .page-link,
.release-pagination .pagination a,
.release-pagination .pagination span{
    display:inline-grid;
    min-width:2.7rem;
    min-height:2.7rem;
    place-items:center;
    padding:.5rem .75rem;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent)!important;
    border-radius:.85rem!important;
    color:var(--rel-muted)!important;
    background:color-mix(in srgb,var(--rel-surface) 90%,transparent)!important;
    box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.025);
    font-size:clamp(.78rem,.76rem + .08vw,.875rem);
    font-weight:800;
    text-decoration:none;
    transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}

.release-pagination .page-link:hover{
    transform:translateY(-.1rem);
    border-color:color-mix(in srgb,var(--rel-accent) 35%,transparent)!important;
    color:var(--rel-accent)!important;
    background:color-mix(in srgb,var(--rel-accent) 8%,var(--rel-surface))!important;
}

.release-pagination .active .page-link,
.release-pagination .active > span{
    border-color:var(--rel-accent)!important;
    color:var(--rel-bg)!important;
    background:var(--rel-accent)!important;
    box-shadow:0 .55rem 1.5rem color-mix(in srgb,var(--rel-accent) 18%,transparent);
}

/* =========================
   Detail page
   ========================= */

.release-detail-header{
    position:relative;
    margin-bottom:clamp(1.75rem,3vw,2.75rem);
}

.release-detail-back{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-bottom:clamp(1.15rem,2vw,1.65rem);
    color:var(--rel-muted);
    font-size:clamp(.8rem,.77rem + .09vw,.875rem);
    font-weight:750;
    text-decoration:none;
    transition:color .2s ease,transform .2s ease;
}

.release-detail-back:hover{
    color:var(--rel-accent);
    transform:translateX(.15rem);
}

.release-detail-back svg{
    width:1rem;
    height:1rem;
}

.release-detail-badges{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

.release-detail-badge{
    display:inline-flex;
    align-items:center;
    min-height:2.25rem;
    padding:.4rem .75rem;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:999rem;
    color:var(--rel-muted);
    background:color-mix(in srgb,var(--rel-surface) 88%,transparent);
    font-size:clamp(.76rem,.74rem + .08vw,.85rem);
    font-weight:800;
    backdrop-filter:blur(.75rem);
    -webkit-backdrop-filter:blur(.75rem);
}

.release-detail-badge.is-version{
    color:var(--rel-accent);
    border-color:color-mix(in srgb,var(--rel-accent) 22%,var(--rel-line));
    background:color-mix(in srgb,var(--rel-accent) 7%,var(--rel-surface));
}

.release-detail-title{
    max-width:64rem;
    margin:clamp(.9rem,1.5vw,1.15rem) 0 0;
    color:var(--rel-text);
    font-size:clamp(2rem,1.3rem + 2.7vw,3rem);
    font-weight:900;
    letter-spacing:-.04em;
    line-height:1.35;
    text-wrap:balance;
}

.release-detail-summary{
    max-width:56rem;
    margin:clamp(.8rem,1.5vw,1.15rem) 0 0;
    color:var(--rel-muted);
    font-size:clamp(.96rem,.9rem + .22vw,1.1rem);
    font-weight:500;
    line-height:2;
    text-wrap:pretty;
}

.release-detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem 1.1rem;
    margin-top:1.25rem;
    color:var(--rel-muted);
    font-size:clamp(.78rem,.75rem + .08vw,.875rem);
    font-weight:600;
}

.release-detail-meta span,
.release-detail-meta time{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.release-detail-meta svg{
    width:.95rem;
    height:.95rem;
}

/* =========================
   Rich content
   ========================= */

.release-content{
    position:relative;
    overflow:hidden;
    margin-top:clamp(1.25rem,2.5vw,2rem);
    padding:clamp(1.25rem,3vw,2.25rem);
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:clamp(1.25rem,2vw,1.75rem);
    color:var(--rel-text-soft);
    background:
            linear-gradient(180deg,color-mix(in srgb,var(--rel-surface2) 35%,transparent),transparent 12rem),
            var(--rel-surface);
    box-shadow:var(--rel-shadow-sm),inset 0 .0625rem 0 rgba(255,255,255,.025);
    font-size:clamp(.95rem,.91rem + .16vw,1.05rem);
    line-height:2;
}

.release-content:empty{
    display:none;
}

.release-content p,
.release-content div,
.release-content span,
.release-content li{
    font-family:inherit!important;
    font-size:inherit!important;
    color:inherit;
}

.release-content p{
    margin-block:.85em;
    line-height:2.05;
}

.release-content ul,
.release-content ol{
    margin-block:1rem;
    padding-inline-start:1.4rem;
}

.release-content li{
    margin-block:.45rem;
    line-height:1.95;
}

.release-content li::marker{
    color:var(--rel-accent);
}

.release-content h2,
.release-content h3,
.release-content h4{
    color:var(--rel-text)!important;
    font-family:inherit!important;
    font-weight:900!important;
    letter-spacing:-.018em;
    text-wrap:balance;
}

.release-content h2{
    position:relative;
    margin:2.1em 0 .8em;
    padding-inline-start:.9rem;
    font-size:clamp(1.3rem,1.15rem + .55vw,1.7rem)!important;
    line-height:1.55;
}

.release-content h2::before{
    content:"";
    position:absolute;
    inset:.35em 0 .25em auto;
    width:.2rem;
    border-radius:999rem;
    background:linear-gradient(180deg,var(--rel-accent),var(--rel-blue));
    box-shadow:0 0 1.2rem color-mix(in srgb,var(--rel-accent) 20%,transparent);
}

.release-content h3{
    margin:1.7em 0 .65em;
    color:var(--rel-accent)!important;
    font-size:clamp(1.12rem,1.04rem + .3vw,1.35rem)!important;
    line-height:1.6;
}

.release-content h4{
    margin:1.45em 0 .55em;
    font-size:clamp(1rem,.96rem + .18vw,1.15rem)!important;
    line-height:1.65;
}

.release-content strong,
.release-content b{
    color:var(--rel-text);
    font-weight:850;
}

.release-content a{
    color:var(--rel-accent)!important;
    font-weight:700;
    text-decoration-color:color-mix(in srgb,var(--rel-accent) 45%,transparent);
    text-underline-offset:.2em;
}

.release-content blockquote{
    margin:1.4rem 0;
    padding:1rem 1.15rem;
    border-inline-start:.2rem solid var(--rel-accent);
    border-radius:0 var(--rel-radius-sm) var(--rel-radius-sm) 0;
    color:var(--rel-text-soft);
    background:color-mix(in srgb,var(--rel-accent) 5%,var(--rel-surface2));
}

.release-content code{
    padding:.14em .42em;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:.45rem;
    color:var(--rel-accent);
    background:color-mix(in srgb,var(--rel-bg) 72%,transparent);
    font-size:.9em;
}

.release-content pre{
    overflow:auto;
    margin:1.25rem 0;
    padding:1rem 1.1rem;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:var(--rel-radius-sm);
    background:color-mix(in srgb,var(--rel-bg) 86%,transparent);
}

.release-content pre code{
    padding:0;
    border:0;
    background:none;
}

.release-content hr{
    margin:2rem 0;
    border:0;
    border-top:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
}

.release-content img,
.release-content video,
.release-content iframe{
    display:block;
    max-width:100%!important;
    height:auto;
    margin:clamp(1.25rem,3vw,2rem) auto;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:clamp(.9rem,1.5vw,1.35rem);
    box-shadow:var(--rel-shadow-md);
}

/* =========================
   Change groups
   ========================= */

.release-change-groups{
    display:grid;
    gap:clamp(.875rem,1.5vw,1.15rem);
    margin-top:clamp(1.25rem,2.5vw,2rem);
}

.release-group{
    position:relative;
    overflow:hidden;
    border:.0625rem solid color-mix(in srgb,var(--rel-text) 8%,transparent);
    border-radius:clamp(1.1rem,1.5vw,1.4rem);
    background:
            linear-gradient(145deg,color-mix(in srgb,var(--rel-surface2) 32%,transparent),transparent 50%),
            var(--rel-surface);
    box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.025);
}

.release-group-head{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:clamp(.95rem,1.8vw,1.25rem) clamp(1rem,2vw,1.35rem);
    border-bottom:.0625rem solid color-mix(in srgb,var(--rel-text) 7%,transparent);
    background:color-mix(in srgb,var(--rel-surface2) 22%,transparent);
}

.release-group-icon{
    display:grid;
    width:2.5rem;
    height:2.5rem;
    flex:0 0 2.5rem;
    place-items:center;
    border:.0625rem solid color-mix(in srgb,var(--rel-accent) 13%,transparent);
    border-radius:.8rem;
    color:var(--rel-accent);
    background:color-mix(in srgb,var(--rel-accent) 7%,transparent);
    box-shadow:inset 0 .0625rem 0 rgba(255,255,255,.025);
}

.release-group-icon svg{
    width:1.05rem;
    height:1.05rem;
}

.release-group-head h2{
    margin:0;
    color:var(--rel-text);
    font-size:clamp(1rem,.95rem + .18vw,1.125rem);
    font-weight:850;
    line-height:1.6;
}

.release-items{
    display:grid;
}

.release-item{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:.85rem;
    padding:clamp(.95rem,1.8vw,1.25rem) clamp(1rem,2vw,1.35rem);
    transition:background .2s ease;
}

.release-item:hover{
    background:color-mix(in srgb,var(--rel-text) 1.8%,transparent);
}

.release-item + .release-item{
    border-top:.0625rem solid color-mix(in srgb,var(--rel-text) 6%,transparent);
}

.release-item-mark{
    display:grid;
    width:2.05rem;
    height:2.05rem;
    place-items:center;
    border:.0625rem solid color-mix(in srgb,var(--rel-accent) 12%,transparent);
    border-radius:.68rem;
    color:var(--rel-accent);
    background:color-mix(in srgb,var(--rel-accent) 6%,transparent);
}

.release-item-mark svg{
    width:.95rem;
    height:.95rem;
}

.release-item h3{
    margin:0;
    color:var(--rel-text);
    font-size:clamp(.92rem,.88rem + .14vw,1rem);
    font-weight:800;
    line-height:1.75;
}

.release-item p{
    margin:.35rem 0 0;
    color:var(--rel-muted);
    font-size:clamp(.84rem,.81rem + .1vw,.92rem);
    font-weight:500;
    line-height:1.95;
}

.release-item p:empty{
    display:none;
}

.release-group.is-fixed .release-group-icon,
.release-item.is-fixed .release-item-mark{
    color:var(--rel-blue);
    border-color:color-mix(in srgb,var(--rel-blue) 16%,transparent);
    background:color-mix(in srgb,var(--rel-blue) 8%,transparent);
}

.release-group.is-security .release-group-icon,
.release-item.is-security .release-item-mark{
    color:var(--rel-gold);
    border-color:color-mix(in srgb,var(--rel-gold) 16%,transparent);
    background:color-mix(in srgb,var(--rel-gold) 8%,transparent);
}

.release-group.is-deprecated .release-group-icon,
.release-item.is-deprecated .release-item-mark,
.release-group.is-removed .release-group-icon,
.release-item.is-removed .release-item-mark{
    color:var(--rel-danger);
    border-color:color-mix(in srgb,var(--rel-danger) 16%,transparent);
    background:color-mix(in srgb,var(--rel-danger) 8%,transparent);
}

/* =========================
   Responsive behavior
   ========================= */

@media (max-width:64rem){
    .release-wrap{
        width:min(calc(100% - 2rem),82rem);
    }

    .release-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:50rem){
    .release-grid{
        grid-template-columns:1fr;
    }

    .release-hero{
        border-radius:1.5rem;
    }

    .release-title,
    .release-detail-title{
        letter-spacing:-.025em;
    }
}

@media (max-width:36rem){
    .release-wrap{
        width:min(calc(100% - 1.125rem),82rem);
        padding-block:2.15rem 4rem;
    }

    .release-hero{
        padding:1.25rem;
        border-radius:1.25rem;
    }

    .release-summary-line{
        gap:.45rem;
    }

    .release-summary-pill{
        min-height:2.25rem;
        padding:.4rem .7rem;
    }

    .release-card{
        padding:1.1rem;
        border-radius:1.15rem;
    }

    .release-card-top{
        align-items:flex-start;
    }

    .release-content{
        padding:1.1rem;
        border-radius:1.15rem;
    }

    .release-item{
        gap:.7rem;
        padding:1rem;
    }

    .release-group-head{
        padding:1rem;
    }
}

@media (hover:none){
    .release-card:hover,
    .release-pagination .page-link:hover,
    .release-detail-back:hover{
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){
    .release-page *,
    .release-page *::before,
    .release-page *::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}