/* previews/_about.css
   The gallery's commentary band on each preview page.
   Hard-coded neutral colours on purpose: it must read as site chrome,
   not as part of the demo it sits under, whichever style that demo uses. */

#pv-about {
    background: #11151b;
    color: #c8d2de;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 3.2rem 0 3.6rem;
    border-top: 3px solid #2b3542;
    text-align: left;
    letter-spacing: normal;
}

#pv-about * {
    box-sizing: border-box;
}

#pv-about .wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: block;
}

#pv-about .pv-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7f8d9f;
    margin: 0 0 .9rem;
    padding: 0;
    border: 0;
    background: none;
}

#pv-about h2 {
    font-size: 1.32rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #f2f6fa;
    margin: 0 0 .9rem;
    padding: 0;
    border: 0;
    background: none;
    text-transform: none;
    font-family: inherit;
}

#pv-about p {
    font-size: .95rem;
    line-height: 1.78;
    color: #b9c5d3;
    margin: 0 0 .9rem;
    padding: 0;
    border: 0;
    background: none;
    max-width: none;
}

#pv-about ul {
    list-style: none;
    margin: 1.2rem 0 1.1rem;
    padding: 0;
    border: 0;
}

#pv-about li {
    position: relative;
    font-size: .9rem;
    line-height: 1.65;
    color: #aebbc9;
    margin: 0 0 .5rem;
    padding: 0 0 0 1.15rem;
    border: 0;
    background: none;
}

#pv-about li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    background: #5b6b7e;
    border-radius: 50%;
}

#pv-about .pv-breaks {
    font-size: .9rem;
    line-height: 1.7;
    color: #e8d5b0;
    border-left: 2px solid #7a6741;
    padding-left: .9rem;
    margin: 1.1rem 0 1.4rem;
}

#pv-about .pv-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    align-items: center;
    margin: 0;
    font-size: .86rem;
}

#pv-about .pv-links a {
    color: #8ab4f8;
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid rgba(138, 180, 248, .35);
    padding: 0 0 1px;
    background: none;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

#pv-about .pv-links a:hover {
    color: #b6d0fb;
    border-bottom-color: #b6d0fb;
    text-decoration: none;
}

@media (max-width: 620px) {
    /* extra bottom room so the fixed "back to style page" chip never covers the last line */
    #pv-about { padding: 2.4rem 0 4.4rem; }
    #pv-about h2 { font-size: 1.18rem; }
    #pv-about p { font-size: .92rem; }
}

#pv-about .pv-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .9rem 1.2rem;
    margin: 1.4rem 0 1.2rem;
    padding: 1rem 0;
    border-top: 1px solid #232c38;
    border-bottom: 1px solid #232c38;
}
#pv-about .pv-specs div { margin: 0; padding: 0; }
#pv-about .pv-specs dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #77869a;
    margin: 0 0 .25rem;
}
#pv-about .pv-specs dd {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: #d5dee8;
}