/* Facet: one stylesheet, no CDN, no build step.
   Nothing here is loaded from another host, so the pages keep working when a CDN retires
   (tux.com.au's own Bootstrap link points at StackPath, which has since shut down). */

:root {
    color-scheme: light dark;
    --ink: #1c1d21;
    --ink-soft: #55575e;
    --page: #ffffff;
    --panel: #f4f5f7;
    --rule: #e0e2e6;
    --accent: #2f5fd0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e9eaee;
        --ink-soft: #a2a5ad;
        --page: #16171a;
        --panel: #1f2126;
        --rule: #2e3037;
        --accent: #7ea4f0;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Header */

header.site {
    border-bottom: 1px solid var(--rule);
    padding: 2.5rem 0 2rem;
}

.mark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

/* Matched to the wordmark's own font size, so the cube stands as tall as the F beside it without
   overtopping it. */
.mark svg {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
}

/* The app authors this at stroke-width 1.5 in a 65 unit box, which at this size rasterises to well
   under a pixel and comes out as a grey smudge rather than a line. 3.5 user units is a little over
   one pixel, which is what the shape needs to stay a shape, and it sits about right against the
   weight of the bold wordmark. CSS beats the presentation attribute on the paths, so the file's own
   value is left as the app wrote it. */
.mark svg path {
    stroke-width: 3.5;
}

.mark h1 {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}

.tagline {
    margin: 1.25rem 0 0;
    font-size: 1.3rem;
    color: var(--ink-soft);
    max-width: 32rem;
}

/* The home page's version: the mark at full size with the name and the tagline set beside it, rather
   than the compact bar the inner pages carry. */
.mark-hero {
    gap: 1.5rem;
}

.mark-hero svg {
    width: 9.5rem;
    height: 9.5rem;
}

/* 3.5 units is sized for a mark of about 28px. At 9.5rem the same figure rasterises to roughly eight
   pixels and turns the cube into a cartoon of itself, so the hero takes the weight back down. */
.mark-hero svg path {
    stroke-width: 2;
}

.mark-text {
    /* Without this a long tagline refuses to wrap and pushes the lockup wider than the column. */
    min-width: 0;
}

.mark-hero .tagline {
    margin: 0.5rem 0 0;
    max-width: none;
}

/* Body copy */

main {
    padding: 2.5rem 0 1rem;
}

h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.05rem;
}

p {
    margin: 0 0 1rem;
}

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

ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

li {
    margin-bottom: 0.4rem;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--panel);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

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

.lead {
    font-size: 1.05rem;
}

.stamp {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Footer */

footer.site {
    border-top: 1px solid var(--rule);
    margin-top: 3rem;
    padding: 1.5rem 0 3rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

footer.site nav a {
    margin-right: 1.25rem;
}

@media (max-width: 34rem) {
    /* A 9.5rem mark beside text leaves a phone about ten characters a line. Stack it instead. */
    .mark-hero {
        display: block;
    }

    .mark-hero svg {
        width: 5.5rem;
        height: 5.5rem;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 30rem) {
    body {
        font-size: 16px;
    }

    .tagline {
        font-size: 1.15rem;
    }
}