/* Motor's design language, from the first motor.dev (Galadriel): black frames, square corners,
   flat gray shadows, Futura for display text, and a palette after Kandinsky. */

:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "New York", Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Geometric display fonts with a system sans fallback. */
    --font-display: Futura, "Futura PT", "Century Gothic", "URW Gothic", "URW Gothic L", var(--font-sans);
    --tracking-caps: 0.08em;
    --color-text: #111;
    --color-muted: #4a4a4a;
    --color-line: #e4e4e4;
    --color-surface: #f2f2f2;
    --color-field: #fff;
    /* The gray shadow of buttons and raised panels. */
    --shadow: 0.25rem 0.25rem 0 var(--color-line);
    --color-background: #fefefe;

    /* Kandinsky palette. Contrast ratios: against background, white, and --color-text.
       WCAG AA minimums: 4.5:1 for text; 3:1 for lines, borders, and icons. */
    --color-cobalt: #1c4ba0;         /* 8.1:1, white 8.2:1, text 2.3:1 */
    --color-turquoise: #1a7f86;      /* 4.7:1, white 4.8:1, text 4.0:1 */
    --color-violet: #5b3a8e;         /* 8.5:1, white 8.6:1, text 2.2:1 */
    --color-rose-madder: #b8285f;    /* 5.9:1, white 6.0:1, text 3.2:1 */
    --color-vermilion: #e34234;      /* 4.1:1, white 4.1:1, text 4.6:1 */
    --color-cadmium-yellow: #f2c12e; /* 1.7:1, white 1.7:1, text 11.2:1: only for fills under dark text */
    --color-cadmium-yellow-line: #bc8c00; /* 3.0:1: the yellow for lines and borders */

    /* Links are bold, cobalt, and underlined: 8.1:1 on the background and 7.3:1 on the surface.
       Cobalt is only 2.3:1 with --color-text, so the underline, not the color, marks a link in a
       paragraph (WCAG 1.4.1). */
    --color-link: var(--color-cobalt);
    /* A lighter cobalt for a link under the pointer: 5.5:1 on the background and 4.9:1 on the
       surface. */
    --color-link-hover: #2563d3;
    /* The lightest gray with a contrast of 4.5:1 (WCAG AA) on the background. */
    --color-faint: #757575;
}

html {
    scroll-padding-top: 1.5rem;
    /* Every page keeps space for the scrollbar, so short pages and long pages have the same frame. */
    scrollbar-gutter: stable;
}

body {
    margin: 0 auto;
    max-width: 52rem;
    padding: 1.5rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.25;
}

h2 {
    font-size: 1.75rem;
}

main > section {
    margin-bottom: 3rem;
}

main > section:first-child p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    transition: color 150ms ease;
}

/* Hover changes the link color only where a link uses it, so the logo and links with their own
   color stay as they are. */
a:hover {
    --color-link: var(--color-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

pre.code {
    margin: 0.75rem 0 1.25rem;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    border-left: 4px solid var(--color-text);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
}

pre.code code {
    font-size: inherit;
}

/* The header: the logo at the left, the main navigation at the right. */
body > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* The logo keeps the color of the text, without an underline. */
body > header > a {
    color: inherit;
    text-decoration-line: none;
}

body > header svg {
    display: block;
    height: 2rem;
    width: auto;
}

body > header ul {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > header nav a {
    font-family: var(--font-display);
    font-size: 1.125rem;
    /* Futura has no semibold; use medium. */
    font-weight: 500;
    white-space: nowrap;
}

/* The link of the page that is open is black, without an underline. */
body > header nav a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-line: none;
}

/* The copyright line and the footer links. */
body > footer {
    margin-top: 3rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1.25rem;
}

body > footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > footer a {
    font-weight: 500;
}

body > footer a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-line: none;
}

/* The bands of the hero, which tiles.js draws. They reserve their space, so the page doesn't
   shift when the tiles come. */
.tiles {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    aspect-ratio: 12 / 1;
    margin-bottom: 2.5rem;
    border: 2px solid var(--color-text);
    overflow: hidden;
}

.tiles svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tiles + h1 {
    margin-top: 0;
}

/* Half-height shape band; clip tiles beyond the first row. */
.tiles.shapes {
    grid-template-columns: repeat(24, 1fr);
    grid-auto-rows: 100%;
    aspect-ratio: 24 / 1;
    margin: 2.5rem 0 0;
}

/* Text that only screen readers and agents that read the page get. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The pieces of the Motor puzzle: a list of the services, each with its icon on a puzzle piece of
   its color, its name in its color, which is a link to it, and its description. The items are all
   as tall as the tallest one, and each piece is as tall as its item, so that the tab at the
   bottom of each piece fits the blank at the top of the next. A piece is as tall as it is wide
   while the text of each item fits in that height. */
/* The list is indented by the most that a tab sticks out of the left of a piece. */
.pieces {
    --piece: 8rem;
    display: grid;
    grid-auto-rows: 1fr;
    margin: 2rem 0 0;
    padding: 0 0 0 calc(var(--piece) * 0.22);
    list-style: none;
}

.piece {
    display: grid;
    grid-template-columns: var(--piece) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: center;
    min-height: var(--piece);
}

/* The text has room above and below it, inside its piece. */
.piece > div {
    padding: 1rem 0;
}

.piece .shape {
    position: relative;
    align-self: stretch;
    width: var(--piece);
}

/* The piece: its body fills the shape, and its tabs stick out of it, by up to 22% of the body. A
   taller body stretches the piece, and not the icon. */
.piece .jigsaw {
    position: absolute;
    inset: -25%;
    width: 150%;
    height: 150%;
    overflow: visible;
}

.piece .jigsaw path {
    fill: var(--fill);
}

/* The icon is at the center of the body, with room around it even where a blank cuts in. */
.piece .icon {
    position: absolute;
    inset: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin: auto;
}

.piece .fg {
    fill: var(--ink);
}

/* Each icon is a disc, with its sign cut out in the color of the piece. */
.piece .cut {
    fill: var(--fill);
}

/* The lines are as thick as the blades of the rotor. */
.piece .cut-line {
    fill: none;
    stroke: var(--fill);
    stroke-width: 4.5;
}

.piece .round {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A groove in a cut, such as the ring of the piston, in the color of the disc. */
.piece .fg-groove {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
}

.piece h3 {
    margin: 0;
    font-size: 1.5rem;
}

/* The name is in the color of the service. Under the pointer, it's lighter or more saturated, as
   the other links are. It's large text, so both colors need 3:1 on the background. */
.piece h3 a {
    color: var(--text, var(--fill));
    font-weight: inherit;
}

.piece h3 a:hover {
    color: var(--hover);
}

/* The description is like the text of the hero, far enough under the name that the underline of
   the name has room. */
.piece p {
    margin: 0.625rem 0 0;
    font-size: 1.1875rem;
    line-height: 1.55;
}

@media (max-width: 40rem) {
    .pieces {
        --piece: 6.5rem;
    }

    .piece {
        column-gap: 1.75rem;
    }

    .piece > div {
        padding: 0.75rem 0;
    }

    .piece h3 {
        font-size: 1.375rem;
    }

    .piece p {
        margin-top: 0.5rem;
    }

    .piece .icon {
        width: 2rem;
        height: 2rem;
    }
}

/* The color of each service, the color of its icon, and the color of its name under the pointer.
   On yellow, the icon is dark, and the name is in the yellow for lines (3.0:1), which is too dark
   to be lighter, so it's more saturated under the pointer (3.6:1). */
.piece.s-motor       { --fill: var(--color-vermilion);      --ink: var(--color-background); --hover: #f45a4c; }
.piece.s-ohm         { --fill: var(--color-cobalt);         --ink: var(--color-background); --hover: var(--color-link-hover); }
.piece.s-current     { --fill: var(--color-cadmium-yellow); --ink: var(--color-text); --text: var(--color-cadmium-yellow-line); --hover: #b07c00; }
.piece.s-amp         { --fill: var(--color-rose-madder);    --ink: var(--color-background); --hover: #d6376f; }
.piece.s-switchboard { --fill: var(--color-turquoise);      --ink: var(--color-background); --hover: #1c9aa3; }
.piece.s-piston      { --fill: var(--color-violet);         --ink: var(--color-background); --hover: #7448b4; }

/* The investors on the About page: a row of logos below the line that introduces them. */
.backers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.backers a {
    display: flex;
    color: inherit;
    text-decoration: none;
}

.backers img {
    width: auto;
    height: 1.625rem;
}

.backers li:last-child img {
    height: 2.25rem;
}

/* The Terms of Service and the Privacy Policy: long text in the body size, with numbered sections. */
main > section.legal p {
    font-size: 1rem;
    line-height: 1.5;
}

.legal .effective {
    color: var(--color-muted);
}

.legal h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.legal h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.125rem;
}

.legal li + li {
    margin-top: 0.375rem;
}

/* On a phone, the text and the header are smaller, and the bands have two rows. */
@media (max-width: 40rem) {
    body {
        padding: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    body > header {
        margin-bottom: 2rem;
    }

    body > header svg {
        height: 1.5rem;
    }

    body > header nav a {
        font-size: 1rem;
    }

    .tiles {
        grid-template-columns: repeat(6, 1fr);
        aspect-ratio: 6 / 2;
    }

    .tiles.shapes {
        grid-template-columns: repeat(12, 1fr);
        aspect-ratio: 12 / 1;
    }
}