/* Spotprent.shop — shared shell.

   Design tokens and the header/footer chrome. Everything is prefixed sp-. Bootstrap and jQuery were
   dropped from the layout: this site is one screen used almost entirely on a phone, and the whole
   framework was being loaded to style a navbar we don't have any more.

   The palette, the two type families and the gold hairline borders are lifted from spotprent.shop so
   the two read as the same brand without this being a copy of the shop. */

:root {
    /* Brand */
    --sp-gold: #b89d4f;
    --sp-gold-dark: #a48c47;
    --sp-gold-soft: #f0e9d6;
    --sp-cream: #f5f0e5;

    /* Surfaces */
    --sp-paper: #fefdfb;
    --sp-white: #fff;
    --sp-rule: #d9dadb;

    /* Ink */
    --sp-ink: #000;
    --sp-ink-soft: #424242;
    --sp-muted: #808080;

    /* Feedback */
    --sp-alert: #b3261e;
    --sp-alert-soft: #fbeae8;

    --sp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sp-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* One shared gutter, so the header, body and footer line up down the page. */
    --sp-gutter: 1.15rem;
    --sp-measure: 62rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sp-cream);
    color: var(--sp-ink);
    font-family: var(--sp-serif);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Stops the grey flash box on tap that Android browsers draw over buttons. */
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}

a {
    color: var(--sp-ink);
}

/* ---------- skip link ---------- */

.sp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.7rem 1rem;
    background: var(--sp-ink);
    color: var(--sp-white);
    font-family: var(--sp-sans);
    font-size: 0.85rem;
    text-decoration: none;
}

    .sp-skip:focus {
        left: 0;
    }

/* ---------- header ---------- */

.sp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--sp-paper);
    border-bottom: 1px solid var(--sp-gold);
    /* Cheap depth that survives over scrolled content without looking like a Material card. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    padding-top: env(safe-area-inset-top);
}

.sp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--sp-measure);
    margin: 0 auto;
    padding: 0.7rem var(--sp-gutter);
    padding-left: max(var(--sp-gutter), env(safe-area-inset-left));
    padding-right: max(var(--sp-gutter), env(safe-area-inset-right));
}

.sp-logo {
    display: block;
    line-height: 0;
}

    /* The wordmark is a 437x51 transparent PNG of hand-drawn black lettering, so it only needs a
       height and a light surface behind it. */
    .sp-logo img {
        height: 1.5rem;
        width: auto;
    }

.sp-shoplink {
    flex: none;
    font-family: var(--sp-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--sp-gold-dark);
    text-decoration: none;
    padding: 0.55rem 0;
    white-space: nowrap;
}

    .sp-shoplink:hover,
    .sp-shoplink:focus-visible {
        color: var(--sp-ink);
    }

/* ---------- main ---------- */

.sp-main {
    flex: 1 0 auto;
}

/* ---------- footer ---------- */

.sp-footer {
    margin-top: 3rem;
    background: var(--sp-paper);
    border-top: 1px solid var(--sp-gold);
    padding-bottom: env(safe-area-inset-bottom);
}

.sp-footer-inner {
    max-width: var(--sp-measure);
    margin: 0 auto;
    padding: 1.6rem var(--sp-gutter) 2rem;
    padding-left: max(var(--sp-gutter), env(safe-area-inset-left));
    padding-right: max(var(--sp-gutter), env(safe-area-inset-right));
    text-align: center;
}

.sp-footer-brand {
    margin: 0;
    font-family: var(--sp-serif);
    font-size: 1rem;
    font-weight: 600;
}

.sp-footer-nav {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin: 0.6rem 0 0.9rem;
}

    .sp-footer-nav a {
        font-family: var(--sp-sans);
        font-size: 0.82rem;
        color: var(--sp-gold-dark);
        text-decoration: none;
        padding: 0.35rem 0;
    }

        .sp-footer-nav a:hover,
        .sp-footer-nav a:focus-visible {
            color: var(--sp-ink);
            text-decoration: underline;
        }

/* The sign-out control is a form (POST, not a link) but reads as one more footer-nav item. */
.sp-footer-logout {
    display: contents;
}

    .sp-footer-logout button {
        border: none;
        background: none;
        font-family: var(--sp-sans);
        font-size: 0.82rem;
        color: var(--sp-gold-dark);
        padding: 0.35rem 0;
        cursor: pointer;
    }

        .sp-footer-logout button:hover,
        .sp-footer-logout button:focus-visible {
            color: var(--sp-ink);
            text-decoration: underline;
        }

.sp-footer-note {
    margin: 0;
    font-family: var(--sp-sans);
    font-size: 0.72rem;
    font-weight: 300;
    color: var(--sp-muted);
}

/* ---------- plain content pages (Privacy, Error) ---------- */

.sp-prose {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem var(--sp-gutter) 1rem;
}

    .sp-prose h1 {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        margin: 0 0 1rem;
    }

    .sp-prose h2 {
        font-size: 1.15rem;
        font-weight: 600;
        margin: 1.8rem 0 0.5rem;
    }

    .sp-prose p,
    .sp-prose li {
        color: var(--sp-ink-soft);
    }

    .sp-prose code {
        font-size: 0.85em;
        background: var(--sp-gold-soft);
        padding: 0.1em 0.35em;
    }

@media (min-width: 40rem) {
    .sp-logo img {
        height: 1.85rem;
    }

    .sp-shoplink {
        font-size: 0.85rem;
    }
}