.wy-nav-content {
    max-width: none;
}

/* The landing page leads with the wordmark, so the page title it duplicates is
   hidden. Browsers without :has() simply show both. */
.landing-logo {
    text-align: center;
    margin: 0 0 1.2em;
}

.landing-subtitle {
    text-align: center;
    margin-bottom: 1.5em;
}

.landing-subtitle p {
    margin-bottom: 0;
    font-size: 115%;
}

section:has(> .landing-logo) > h1 {
    display: none;
}

/* The capability grid on the landing page: one tile per capability, its caption
   carrying the links. Tiles are forced to a common aspect ratio so that figures
   of different shapes still line up. */
.capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75em;
    margin-bottom: 2em;
}

.capability-cell img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
}

.capability-cell p {
    margin: 0.7em 0 0;
    line-height: 1.5;
}

/* Capabilities that do not exist yet are dimmed until hovered. */
.capability-cell.planned img,
.capability-cell.planned p {
    opacity: 0.55;
}

.capability-cell.planned:hover img,
.capability-cell.planned:hover p {
    opacity: 1;
}

/* Capabilities that do not exist yet name themselves in italics. */
.capability-cell em {
    color: #999;
    font-style: italic;
}

/* Tutorial questions are a plain admonition, so the theme lays out the band,
   the body tint and the title exactly as it does for a note. Only the hue and
   the icon are ours; the answer folds away behind a dropdown in the body. */
:root {
    --question-band: #9b59b6;
    --question-tint: #f7f1fa;
    --question-text: #7d3c98;
}

.rst-content .question.admonition {
    background: var(--question-tint);
}

.rst-content .question > .admonition-title {
    background: var(--question-band);
}

/* Question mark, in place of the exclamation mark the theme prefixes an
   admonition with. */
.rst-content .question > .admonition-title::before {
    content: "\f059";
}

/* The answer toggle carries no card chrome of its own: inside the box, the
   summary line alone marks it as clickable. */
.rst-content .question .sd-dropdown {
    margin: 0;
    border: none;
    background: transparent;
}

/* sphinx-design's spacing utility (`sd-mb-3`) is !important, so nothing short
   of !important closes the gap it leaves at the foot of the box. */
.rst-content .question .sd-dropdown:last-child {
    margin-bottom: 0 !important;
}

.rst-content .question .sd-summary-title {
    padding: 0;
    color: var(--question-text);
    background: transparent;
    border: none;
    font-size: inherit;
    font-weight: 700;
}

.rst-content .question .sd-summary-content.sd-card-body {
    padding: 12px 0 0;
}

/* A display equation too wide for the column scrolls within its own block,
   rather than widening the page. */
.rst-content div.math {
    overflow-x: auto;
    overflow-y: hidden;
}