/* The Canon: about.css. The editorial layer over tokens.css and the shared chrome
   in shell.css, loaded third and last. This page is one region and carries one
   region colour, emerald, on its headings and its card borders. The only other
   hues on it are semantic: the three medium colours on the count line and on the
   three sibling-site links, and gold on the three-star mark. */

.about-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 var(--space-3) var(--space-8);
}

/* ── Title band ───────────────────────────────────────────────────────────── */
/* .page-head in shell.css carries the type and the padding; this adds the bloom
   and the count line. Horizontal insets on the glow stay at 0: a negative one
   widens the page and adds a horizontal scrollbar, since an absolutely
   positioned child counts toward overflow even when it is purely decorative. */
.about-head {
    position: relative;
    margin-bottom: var(--space-4);
}

.about-head::before {
    content: '';
    position: absolute;
    inset: -32% 0 -18%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(58% 62% at 50% 45%, rgba(36, 224, 122, 0.16), transparent 72%);
}

/* The one figure on the page the nightly sync can move, so it is coloured as
   data rather than as prose: total in the site's own emerald, each medium in the
   hue its badge carries on every card in the grid. */
.canon-count {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: var(--space-3);
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.canon-count strong {
    font-size: 1.25rem;
    font-weight: 700;
}

.count-medium {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.count-medium::before {
    content: '·';
    color: var(--text-secondary);
    margin-right: 5px;
}

.count-medium[data-medium="film"] { color: var(--medium-film); }
.count-medium[data-medium="anime"] { color: var(--medium-anime); }
.count-medium[data-medium="book"] { color: var(--medium-book); }

/* ── Prose panels ─────────────────────────────────────────────────────────── */
.about-section {
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-lift);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-title {
    position: relative;
    color: var(--accent-primary);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: var(--space-3);
    padding-bottom: 12px;
}

/* Short accent rule under each heading: the page has six panels of running prose
   and needs a mark that says where one argument stops. */
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--accent-primary);
    box-shadow: 0 0 12px rgba(36, 224, 122, 0.45);
}

.about-section p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: var(--space-2);
}

.about-section p:last-child {
    margin-bottom: 0;
}

.about-section strong {
    color: var(--text-primary);
    font-weight: 700;
}

.about-section em {
    color: var(--text-primary);
    font-style: italic;
}

.about-section a {
    color: var(--accent-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color var(--motion-hover) var(--ease-standard),
        text-shadow var(--motion-hover) var(--ease-standard);
}

.about-section a:hover {
    color: var(--text-primary);
    text-shadow: 0 0 14px currentColor;
}

/* The three sibling sites are named in their own medium hues, the same colours
   their badges carry on every card, so the link to Films reads as the film
   colour before the sentence is read. */
.site-ref[data-medium="film"] { color: var(--medium-film); }
.site-ref[data-medium="anime"] { color: var(--medium-anime); }
.site-ref[data-medium="book"] { color: var(--medium-book); }

/* ── The three-star mark ──────────────────────────────────────────────────── */
/* Same symbol, same gold, same drop shadow as the stars on a card. Gold appears
   nowhere else on this page. */
.svg-sprite {
    display: none;
}

.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--accent-curator);
    line-height: 0;
    vertical-align: -2px;
}

.star-rating .star {
    flex: none;
    width: 16px;
    height: 16px;
}

.star-rating .star--on {
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(245, 197, 24, 0.5));
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
/* Its own region and its own hue: the one place on the page asking for something
   back. Magenta is the discovery accent elsewhere on the site, and carries the
   same "this one is an invitation" reading here. */
.contact-section {
    position: relative;
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--accent-quaternary-dim);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-lift);
    padding: var(--space-4);
    text-align: center;
}

.contact-title {
    color: var(--accent-quaternary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-2);
}

.contact-description {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: var(--space-3);
}

/* Emerald clears the legibility floor as link text on canvas (13.5:1), and
   --text-on-accent clears it against emerald on the filled hover state. */
.contact-email {
    display: inline-block;
    background: var(--panel-fill-sunken);
    color: var(--accent-primary);
    text-decoration: none;
    padding: 13px 30px;
    border-radius: var(--radius-md);
    border: var(--border) solid var(--panel-border);
    font-weight: 700;
    font-size: 1.05rem;
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard),
        color var(--motion-hover) var(--ease-standard);
}

.contact-email:hover {
    transform: translateY(-3px);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    box-shadow: var(--panel-lift-high), 0 0 26px rgba(36, 224, 122, 0.35);
}

.contact-email:active {
    transform: translateY(-1px);
}

.contact-email:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

/* ── Narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .about-container {
        padding: 0 var(--space-2) var(--space-6);
    }

    .about-section {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .section-title {
        font-size: 1.4rem;
    }

    .about-section p,
    .contact-description {
        font-size: 1rem;
    }
}

/* The hand-placed line breaks in the contact block are set for a wide measure
   and fight the wrapping below it. */
@media (max-width: 600px) {
    .contact-description br {
        display: none;
    }
}