:root {
    --bg: #060808;
    --panel: #0b0f11;
    --panel-2: #0f1417;
    --line: #273036;
    --line-soft: #182126;
    --text: #e7e1d6;
    --muted: #9ca4a7;
    --dim: #687177;
    --accent: #d6523a;
    --accent-soft: #8f3428;
    --blue: #83a8ba;
    --shadow: rgba(0,0,0,.65);
    --mono: "Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --serif: Georgia,"Times New Roman",serif;
    --sans: Inter,Arial,Helvetica,sans-serif;
}

* {
    box-sizing: border-box
}

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/48px 48px, linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px) 0 0/48px 48px, radial-gradient(circle at 70% 10%,rgba(70,90,100,.16),transparent 38rem), var(--bg);
}

a {
    color: inherit;
    text-decoration: none
}

    a:hover {
        color: var(--accent)
    }

img {
    max-width: 100%;
    display: block
}

.site-shell {
    max-width: 1920px;
    margin: 0 auto;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    min-height: 100vh;
    background: rgba(3,5,6,.6)
}

.topbar {
    height: 110px;
    display: grid;
    grid-template-columns: 120px 330px minmax(360px, 1fr) minmax(620px, 760px) 190px;
    border-bottom: 1px solid var(--line);
    background: rgba(4,6,7,.88);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(8px);
}

.brand-block {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line)
}

.brand-logo {
    width: 74px;
    height: 74px;
    filter: drop-shadow(0 0 12px rgba(214,82,58,.15))
}

.top-kicker {
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-right: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .16em;
    color: var(--muted);
    text-transform: uppercase;
    line-height: 1.65;
}

    .top-kicker span {
        white-space: nowrap;
    }

.site-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 2.8rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 34px;
    padding-right: 36px;
    font-family: var(--mono);
    font-size: .86rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-left: 1px solid var(--line)
}

    .main-nav a[aria-current="page"], .main-nav a.active {
        color: var(--accent)
    }

.status-panel {
    border-left: 1px solid var(--line);
    padding: 24px 22px;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.signal-bars {
    height: 24px;
    margin: 8px 0 4px;
    background: repeating-linear-gradient(90deg,rgba(131,168,186,.2) 0 2px,transparent 2px 6px);
    position: relative;
    overflow: hidden
}

    .signal-bars:after {
        content: "";
        position: absolute;
        left: 8px;
        right: 12px;
        bottom: 3px;
        height: 12px;
        background: linear-gradient(90deg,transparent,rgba(131,168,186,.6),transparent);
        clip-path: polygon(0 100%,5% 30%,10% 80%,16% 10%,20% 70%,26% 0,33% 70%,43% 20%,50% 60%,60% 15%,70% 80%,82% 35%,95% 95%,100% 70%)
    }

.hero {
    display: grid;
    grid-template-columns: 120px 1fr 190px;
    min-height: 405px;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden
}

.side-rail {
    border-right: 1px solid var(--line);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .18em;
    color: var(--dim);
    text-transform: uppercase;
    writing-mode: vertical-rl
}

    .side-rail .dot {
        width: 18px;
        height: 18px;
        border: 1px solid var(--accent);
        border-radius: 50%;
        writing-mode: horizontal-tb;
        position: relative
    }

        .side-rail .dot:after {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: var(--accent)
        }

.hero-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(430px,620px) 1fr;
    overflow: hidden
}

.hero-art {
    position: absolute;
    inset: 0;
    z-index: 0
}

    .hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    .hero-art:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(5,8,9,.98) 0%,rgba(5,8,9,.82) 34%,rgba(5,8,9,.30) 55%,rgba(5,8,9,.08) 80%),linear-gradient(0deg,rgba(5,8,9,.75),transparent 38%,rgba(5,8,9,.25));
    }

.hero-copy {
    position: relative;
    z-index: 1;
    padding: 52px 52px 42px
}

.eyebrow {
    font-family: var(--mono);
    font-size: .84rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700
}

.hero h1, .page-hero h1 {
    font-family: var(--serif);
    font-size: 4.2rem;
    line-height: .98;
    margin: 18px 0 22px;
    letter-spacing: .01em;
    text-shadow: 0 2px 18px var(--shadow)
}

.hero p {
    max-width: 420px;
    color: #d0ccc5;
    font-size: 1.08rem;
    border-top: 1px solid rgba(231,225,214,.23);
    padding-top: 22px
}

.hero-link, .section-link, .arrow-link {
    font-family: var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700
}

.hero-meta {
    border-left: 1px solid var(--line);
    padding: 58px 28px;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(5,7,8,.62)
}

    .hero-meta dt {
        color: var(--dim);
        margin-top: 18px
    }

    .hero-meta dd {
        margin: 4px 0 0;
        color: #d9d6cf
    }

.target {
    width: 54px;
    height: 54px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    margin-top: 22px;
    position: relative
}

    .target:before, .target:after {
        content: "";
        position: absolute;
        background: var(--accent);
        opacity: .8
    }

    .target:before {
        width: 1px;
        top: -12px;
        bottom: -12px;
        left: 50%
    }

    .target:after {
        height: 1px;
        left: -12px;
        right: -12px;
        top: 50%
    }

.dashboard {
    display: grid;
    grid-template-columns: 1fr 470px 430px;
    gap: 0;
    border-bottom: 1px solid var(--line)
}

.section {
    padding: 18px 32px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 12px
}

.section-title {
    font-family: var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .95rem;
    margin: 0
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px
}

.release-card, .voice-card, .browse-card, .concept-card, .track-row, .framework-box, .page-panel {
    background: linear-gradient(180deg,rgba(18,24,27,.92),rgba(9,12,14,.92));
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0,0,0,.25)
}

    .release-card img {
        height: 145px;
        width: 100%;
        object-fit: cover;
        border-bottom: 1px solid var(--line)
    }

.card-body {
    padding: 13px
}

.card-title {
    font-family: var(--mono);
    font-size: .93rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0 0 18px
}

.card-meta {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .12em
}

.voice-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
}

.voice-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: rgba(8, 13, 15, 0.86);
    text-decoration: none;
    color: inherit;
}

.voice-card img {
    width: 100%;
    aspect-ratio: 1 / 1.35;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--line);
}

.voice-card .card-body {
    padding: 14px 12px 16px;
}

.voice-card .card-title {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.voice-card .card-meta {
    font-size: 0.78rem;
    line-height: 1.45;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
}

.bullet-list {
    margin: 1rem 0 0;
    padding-left: 1.4rem;
}

.bullet-list li {
    margin: .35rem 0;
}

.variable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.variable-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(7, 11, 13, .78);
    padding: 18px;
    min-height: 220px;
}

    .variable-card h3 {
        margin: 0 0 12px;
        color: var(--text);
        font-family: var(--mono);
        font-size: .9rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .variable-card p {
        margin: 0 0 12px;
    }

    .variable-card .card-meta {
        color: var(--muted);
        font-size: .82rem;
        line-height: 1.55;
        letter-spacing: .04em;
    }

.model-note {
    margin-top: 18px;
    border-left: 3px solid var(--accent);
    padding: 16px 18px;
    background: rgba(192, 87, 58, .08);
}

.model-note h3 {
    margin-top: 0;
}

.lyrics-heading {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.explicit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--muted, #8a949b);
    color: var(--muted, #8a949b);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    border-radius: 2px;
    transform: translateY(-.05rem);
}

@media (max-width: 1100px) {
    .variable-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .variable-grid {
        grid-template-columns: 1fr;
    }
}

.role-card.plus-role {
    border-color: rgba(118, 164, 181, .35);
}

.role-card .card-meta {
    margin-top: .9rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 1500px) {
    .voice-strip {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
}

@media (max-width: 1150px) {
    .voice-strip {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 800px) {
    .voice-strip {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 520px) {
    .voice-strip {
        grid-template-columns: 1fr;
    }
}

.latest-list {
    display: flex;
    flex-direction: column
}

.track-row {
    display: grid;
    grid-template-columns: 72px 1fr 30px;
    gap: 16px;
    align-items: center;
    padding: 8px;
    border-bottom: 0
}

    .track-row + .track-row {
        margin-top: 8px
    }

    .track-row img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border: 1px solid var(--line)
    }

.play-arrow {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #d8d8d8;
    opacity: .85
}

.browse-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.browse-card {
    min-height: 100px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px
}

    .browse-card svg {
        width: 28px;
        height: 28px;
        stroke: #c7c6c0;
        opacity: .8
    }

.quick-jump {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px
}

    .quick-jump select, .quick-jump button {
        background: #0b0f11;
        border: 1px solid var(--line);
        color: var(--text);
        font-family: var(--mono);
        padding: 10px
    }

    .quick-jump button {
        color: var(--accent)
    }

.framework-box {
    display: grid;
    grid-template-columns: 150px 1fr 190px;
    padding: 14px;
    gap: 18px
}

.framework-orb {
    min-height: 140px;
    border: 1px solid var(--line);
    background: radial-gradient(circle at center,rgba(131,168,186,.2),transparent 50%);
    position: relative
}

    .framework-orb:after {
        content: "";
        position: absolute;
        inset: 22px;
        border: 1px solid rgba(231,225,214,.25);
        border-radius: 50%;
        background: repeating-conic-gradient(from 0deg,rgba(231,225,214,.15) 0 1deg,transparent 1deg 18deg)
    }

.framework-box h3 {
    font-family: var(--serif);
    font-size: 2rem;
    margin: 8px 0
}

.framework-links {
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column
}

    .framework-links a {
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        font-family: var(--mono);
        font-size: .82rem;
        color: var(--muted)
    }

.quote-bar {
    display: grid;
    grid-template-columns: 420px 1fr 120px 210px 260px 260px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    min-height: 78px
}

.wave {
    height: 36px;
    margin: 0 30px;
    background: repeating-linear-gradient(90deg,rgba(131,168,186,.15) 0 2px,transparent 2px 8px)
}

.quote {
    text-align: center;
    font-family: var(--serif);
    font-size: 1.3rem
}

    .quote small {
        display: block;
        font-family: var(--mono);
        font-size: .72rem;
        color: var(--accent);
        letter-spacing: .16em;
        margin-top: 6px
    }

.qcell {
    border-left: 1px solid var(--line);
    height: 78px;
    padding: 17px 28px;
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

.site-footer {
    display: grid;
    grid-template-columns: 420px repeat(3,1fr) 300px;
    gap: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line)
}

.footer-brand, .footer-col {
    padding: 0 32px;
    border-right: 1px solid var(--line)
}

.footer-brand {
    display: flex;
    gap: 18px;
    align-items: center
}

    .footer-brand img {
        width: 70px
    }

.footer-title {
    font-family: var(--serif);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 1.3rem
}

.footer-col h3 {
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted)
}

.footer-col a {
    display: block;
    color: var(--muted);
    font-size: .92rem
}

.copyright {
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim)
}

.page {
    padding: 38px 40px 56px
}

.page-hero {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 28px;
    border: 1px solid var(--line);
    background: rgba(8,12,14,.72);
    margin-bottom: 24px;
    overflow: hidden
}

.page-hero-copy {
    padding: 38px
}

.page-hero h1 {
    font-size: 3.4rem;
    margin: 12px 0
}

.dossier {
    border-left: 1px solid var(--line);
    padding: 34px 28px;
    background: rgba(0,0,0,.26);
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .13em
}

    .dossier dt {
        color: var(--dim);
        margin-top: 16px
    }

    .dossier dd {
        margin: 4px 0;
        color: var(--text)
    }

.page-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px
}

.page-panel {
    padding: 24px;
    margin-bottom: 18px
}

    .page-panel h2 {
        font-family: var(--mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 1rem;
        margin: 0 0 16px;
        color: var(--text)
    }

    .page-panel p {
        color: #c8c4bd
    }

.list-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: .9rem
}

    .list-table th, .list-table td {
        border-bottom: 1px solid var(--line);
        padding: 12px;
        text-align: left
    }

    .list-table th {
        color: var(--dim);
        text-transform: uppercase;
        font-size: .75rem;
        letter-spacing: .16em
    }

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tag {
    border: 1px solid var(--line);
    padding: 7px 10px;
    font-family: var(--mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

.lyrics {
    white-space: pre-wrap;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.75;
    color: #d8d2c8
}

.static-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

.concept-card {
    padding: 20px;
    min-height: 170px
}

    .concept-card h2 {
        font-family: var(--mono);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .12em
    }

    .concept-card p {
        color: var(--muted)
    }

.model-columns {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}

.role-card {
    border: 1px solid var(--line);
    background: rgba(12,18,21,.8);
    padding: 16px
}

    .role-card h3 {
        font-family: var(--mono);
        font-size: .95rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin: 0 0 8px
    }

.notice {
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    background: rgba(214,82,58,.08);
    color: #d7d1c8
}

.mobile-toggle {
    display: none
}

.vocalist-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: linear-gradient(90deg, rgba(5, 8, 10, 0.92) 0%, rgba(5, 8, 10, 0.82) 38%, rgba(5, 8, 10, 0.58) 62%, rgba(5, 8, 10, 0.72) 100%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)), var(--hero-image);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
}

.vocalist-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0,0,0,0.18), rgba(0,0,0,0.00) 35%), repeating-linear-gradient( 90deg, rgba(118,164,181,0.035) 0 1px, transparent 1px 24px );
    mix-blend-mode: screen;
    opacity: 0.35;
}

.vocalist-hero > * {
    position: relative;
    z-index: 1;
}
    
.vocalist-index {
    overflow: hidden;
}

.vocalist-index-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .vocalist-index-table th,
    .vocalist-index-table td {
        border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.12));
        padding: 16px 12px;
        vertical-align: middle;
    }

    .vocalist-index-table th {
        color: var(--muted, #7f8b92);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-align: left;
    }

.vocalist-name-col {
    width: 74%;
}

.vocalist-function-col {
    width: 26%;
}

.vocalist-index-person {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--text, #f2ece2);
    text-decoration: none;
}

    .vocalist-index-person:hover .vocalist-index-name,
    .vocalist-index-person:focus-visible .vocalist-index-name {
        color: var(--accent, #d45f43);
    }

.vocalist-index-thumb {
    width: 58px;
    height: 58px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.2));
    background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35)), var(--panel, #101619);
}

.vocalist-index-name {
    display: inline-block;
    color: var(--text, #f2ece2);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: none;
    transition: color 160ms ease;
}

.vocalist-index-function {
    color: var(--text, #f2ece2);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
}

.vocalist-index-table tr:last-child th,
.vocalist-index-table tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 700px) {
    .vocalist-index-table,
    .vocalist-index-table thead,
    .vocalist-index-table tbody,
    .vocalist-index-table tr,
    .vocalist-index-table th,
    .vocalist-index-table td {
        display: block;
    }

        .vocalist-index-table thead {
            display: none;
        }

        .vocalist-index-table tr {
            border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.12));
            padding: 12px 0;
        }

        .vocalist-index-table td {
            border-bottom: 0;
            padding: 6px 12px;
        }

    .vocalist-index-function {
        padding-left: 88px;
        color: var(--muted, #8a949b);
        white-space: normal;
    }
}

.release-title-cell {
    padding: 0.9rem 0.75rem;
}

.release-title-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.release-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex: 0 0 auto;
}

@media (max-width:1400px) {
    .topbar {
        grid-template-columns: 96px 210px 1fr 620px 160px
    }

    .site-title {
        font-size: 2.2rem
    }

    .main-nav {
        gap: 20px
    }

    .dashboard {
        grid-template-columns: 1fr
    }

    .section {
        border-right: 0
    }

    .card-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .voice-strip {
        grid-template-columns: repeat(5,1fr)
    }

    .quote-bar, .site-footer {
        grid-template-columns: 1fr
    }

    .qcell, .footer-brand, .footer-col {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--line)
    }
}

@media (max-width:900px) {
    .topbar {
        position: relative;
        height: auto;
        grid-template-columns: 80px 1fr
    }

    .top-kicker, .status-panel {
        display: none
    }

    .site-title {
        font-size: 1.5rem;
        justify-content: flex-start;
        padding-left: 18px
    }

    .main-nav {
        grid-column: 1/-1;
        justify-content: flex-start;
        overflow: auto;
        padding: 14px 20px;
        border-top: 1px solid var(--line);
        border-left: 0
    }

    .hero {
        grid-template-columns: 1fr
    }

    .side-rail, .hero-meta {
        display: none
    }

    .hero-main {
        grid-template-columns: 1fr
    }

    .hero-copy {
        padding: 36px 24px
    }

    .hero h1, .page-hero h1 {
        font-size: 3rem
    }

    .card-grid, .voice-strip, .browse-grid, .static-grid, .model-columns, .role-grid {
        grid-template-columns: 1fr
    }

    .page {
        padding: 24px 16px
    }

    .page-hero, .page-grid, .framework-box {
        grid-template-columns: 1fr
    }

    .framework-links {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .copyright {
        display: block
    }

    .release-card img {
        height: 220px
    }
}