/* Shared styles for the ArtFetcher site. */

:root {
    color-scheme: dark;
    --background: #121212;
    --foreground: #e9e9e9;
    --muted: #a2a2a2;
    --rule: #2e2e2e;
    --accent: #5b9dff;

    /* Every page is laid out to this width: wide enough for the landing page's
       feature rows to hold a screenshot beside the text, and the same frame the
       prose pages sit in so one page does not jump narrower than the next.
       Padding sits inside it, so this is 1060px of content plus the gutters. */
    --wide: 1180px;

    /* Each platform's closest humanist sans: PT Sans on macOS, Segoe UI on
       Windows, then the generic system face. */
    --sans: "PT Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--sans);
    font-size: 1.25rem;
    line-height: 1.7;
    background: var(--background);
    color: var(--foreground);
    max-width: var(--wide);
    margin: 0 auto;
    /* The side padding is the whole gutter once the viewport is narrower than
       --wide, so it is set for that case rather than for a full-width window. */
    padding: 2.5rem 3.75rem 4rem;
}

body.landing {
    padding-bottom: 6rem;
}

a { color: var(--accent); }

/* One heading scale for the whole site, so a section heading is the same size
   whether it introduces a feature row or a clause of the privacy policy. The
   top two levels are display sizes: they shrink with the viewport, and the
   negative tracking keeps the large settings from looking loose. */
h1 {
    font-size: clamp(2.75rem, 4.5vw, 3.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: clamp(2.25rem, 3.5vw, 3.125rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: 3rem;
}

h3 { font-size: 2rem; line-height: 1.25; margin-top: 2.5rem; }
/* Fourth level, close enough to the third that weight and spacing carry most of
   the distinction, and still clearly above the reading size. */
h4 { font-size: 1.5rem; line-height: 1.35; margin-top: 2rem; }

/* Subtitle directly under the page heading. */
.updated,
.lede {
    color: var(--muted);
    margin-top: 0;
}

/* Callout holding the one thing a reader should leave with. */
.summary,
.contact {
    border-left: 3px solid var(--accent);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 2rem 0;
}

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; vertical-align: top; }
th { border-bottom: 1px solid var(--foreground); }
td { border-bottom: 1px solid var(--rule); }

dt { font-weight: 700; font-size: larger; margin-top: 1.5rem; }
dd { margin: 0.35rem 0 0; }

/* A screenshot inside running prose, on the help page. `.shot-image` sizes it;
   this is the space it stands in - equal above and below, since the shot
   belongs to the paragraph it follows. */
figure { margin: 1.25rem 0; }

/* The help page's contents list, in the same callout the prose pages use for a
   summary. Its nesting is the section/heading split, so the inner list is
   indented but not bulleted twice. */
.summary ul { padding-left: 1.5rem; }
.summary > ul { list-style: none; padding-left: 0; }
.summary > ul > li { margin-top: 0.75rem; }
.summary > ul > li:first-child { margin-top: 0; }
.summary > ul > li > a { font-weight: 700; }

/* Long filesystem paths appear inline, so allow them to wrap. */
code {
    font-size: 0.9em;
    font-style: italic;
    word-break: break-all;
}

footer {
    margin-top: 4rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 1rem;
}

/* --- Landing page ------------------------------------------------------- */

/* Site name on the left, section links on the right. Wraps to two rows on a
   narrow screen rather than crowding the name. */
.masthead {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.125rem;
}

.masthead .name {
    font-weight: 700;
    color: var(--foreground);
    text-decoration: none;
}

/* Pushed right whether or not the masthead also carries the site name - the
   landing page drops the name, because its hero shows the wordmark instead. */
.masthead nav {
    display: flex;
    gap: 2rem;
    margin-left: auto;
}

/* The page you are already on: shown, but not a link to itself. */
.masthead .current { color: var(--muted); }

/* The heading follows the masthead directly, so it needs no extra top margin. */
.masthead + h1 { margin-top: 2.5rem; }

/* The bottom margin matches `.feature`'s vertical padding, so the wordmark is
   separated from the first row by the same 9rem that separates one row from the
   next - the row supplies half of it either way. */
.hero { margin: 3.5rem 0 4.5rem; }

/* Icon and name side by side at the top of the landing page. The gap is the
   whole separation: `.app-icon` is rendered edge to edge, so unlike a macOS icon
   export it contributes no transparent margin of its own. */
.wordmark {
    display: flex;
    align-items: center;
    gap: 4.5rem;
}

/* Shrinks on a narrow screen rather than pushing the icon off the row. */
.wordmark-text {
    font-size: clamp(4.6875rem, 10.9375vw, 7.8125rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Scaled from the app icon export by `make icons`. The squircle meets the
   left and right edges of its canvas at full height, so this width is the icon
   itself rather than a box it sits inside - only the corners are transparent.
   Served at 560px to stay sharp at 2x here and at 3x on the narrow layout. */
.app-icon {
    width: 260px;
    height: 260px;
    flex-shrink: 0;
}

/* Outlined rather than filled, so the pill reads as a status label. A solid
   button that cannot be clicked looks broken instead of unreleased. */
.coming-soon {
    display: inline-block;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1rem 2.25rem;
    border-radius: 100px;
}

.requirement {
    color: var(--muted);
    font-size: 1rem;
    margin-top: 1rem;
}

/* One feature per row: text in one column, a screenshot in the other, with the
   columns swapping sides on every `flipped` row down the page. */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
    padding: 4.5rem 0;
}

/* Moving the image ahead of the text swaps the pair without reordering the
   markup, so the reading order stays heading-then-text either way. Addressed by
   position, so it holds for a placeholder and a real screenshot alike. */
.feature.flipped > :last-child { order: -1; }

/* A feature row centres its two columns against each other, so the heading
   carries no top margin of its own. */
.feature h2 { margin: 0 0 1.25rem; }

.feature p {
    margin: 0;
    color: var(--muted);
    max-width: 34rem;
}

/* Holds a feature row's second column until its screenshot exists, at roughly
   the proportions a window shot takes. */
.shot {
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--rule);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Window screenshots carry their own rounded corners and drop shadow, so they
   need no frame here. Their own proportions decide the row's height.

   Block display is what keeps a figure's spacing symmetric: an inline image
   sits on a text baseline, and the line box's descender would add a strip of
   space under the shot that the margin above it has no counterpart for. In a
   feature row the image is a grid item, which is blockified regardless. */
.shot-image {
    display: block;
    width: 100%;
    height: auto;
}

/* A symbol rather than a screenshot: it is upright, so filling the column the
   way `.shot-image` does would make it taller than the text beside it. Sized by
   height and centred in its half of the row instead. */
.icon-image {
    height: 14rem;
    width: auto;
    justify-self: center;
}

.closing {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--rule);
    text-align: center;
}

/* The section's own top padding provides the separation above the heading. */
.closing h2 { margin-top: 0; }

/* One column once the pair no longer fits side by side. The icon leads the
   wordmark down the page rather than shrinking it. */
@media (max-width: 900px) {
    .feature {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.5rem 0;
    }

    /* Screenshots follow their text on a narrow screen, whichever side they
       take on a wide one. */
    .feature.flipped > :last-child { order: 0; }

    .hero { margin: 2.5rem 0 3.5rem; }

    .wordmark {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }

    .app-icon { width: 180px; height: 180px; }
}