/* The service page follows the theme's light and dark paper palettes. */
.atelier-services-page .brain-services {
    max-width: 74ch;
    margin-inline: auto;
}

.atelier-services-page .brain-services > nav {
    margin-block: 0 2.5rem;
}

.atelier-services-page .brain-services > nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.atelier-services-page .brain-services > nav li {
    min-width: 0;
    margin: 0;
}

.atelier-services-page .brain-services > nav a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    background: var(--paper-alt);
    font: .9em/1.5 var(--sans);
}

.atelier-services-page .brain-services > section {
    margin-block: 2.5rem 0;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--line);
    scroll-margin-block-start: 1.5rem;
}

.atelier-services-page .brain-services > section > h2 {
    margin-block-start: 0;
}

.atelier-services-page .brain-services h3 {
    margin-block-start: 1.8rem;
    font-size: 1.2em;
}

.atelier-services-page .brain-services table {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .85em;
    line-height: 1.55;
}

.atelier-services-page .brain-services :is(th, td) {
    padding: .7em .8em;
    border: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.atelier-services-page .brain-services thead {
    background: var(--paper-alt);
}

.atelier-services-page .brain-services th:first-child {
    width: 35%;
}

.atelier-services-page .brain-service-prices th:first-child {
    width: 60%;
}

.atelier-services-page .brain-service-prices td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.atelier-services-page .brain-service-contact {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .7em 1em;
    border: 1px solid var(--accent);
    background: var(--paper-alt);
    font: .9em/1.5 var(--sans);
}

@media (max-width: 600px) {
    .atelier-services-page .brain-services > nav ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .atelier-services-page .brain-services table {
        font-size: .82em;
    }

    .atelier-services-page .brain-services :is(th, td) {
        padding: .65em .55em;
    }

    .atelier-services-page .brain-services th:first-child {
        width: 38%;
    }

    .atelier-services-page .brain-service-prices th:first-child {
        width: 60%;
    }
}