/* ============================================================
   CASE STUDIES
   ------------------------------------------------------------
   Deliberately standalone: this page doesn't load the brand
   stylesheets. It gets sent as a direct link to people
   evaluating engineering work, so it needs to read as a
   technical document on its own, load instantly, and print
   cleanly — not as a page inside a clothing storefront.

   Written mobile-first: the base rules are the phone layout,
   and wider screens are additive from there.
   ============================================================ */

:root {
    --bg: #ffffff;
    --surface: #f7f7f8;
    --fg: #14141a;
    --muted: #5b5b66;
    --line: #e4e4e8;
    /* The store's pink (#F966FA) fails contrast on white, so text
       uses a darkened version and the bright tone is kept for rules. */
    --accent: #b01d95;
    --accent-bright: #f966fa;
}

/* Deliberately a single fixed light theme. The rest of the site commits to
   one look per page (About and Work are white, Store and Contact are black),
   so following the viewer's OS theme here would make this the only page that
   changes appearance on its own. */

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

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

body {
    margin: 0;
    /* Transparent so the colour field shows through — the readable surface is
       .wrap, not the page. */
    background: transparent;
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* The reading surface. This page exists so someone evaluating the work can
   actually read it, so the card stays opaque enough to win against whatever
   the field is doing behind it — 94% plus a blur. The field is decoration
   here; the text is the point. */
.wrap {
    position: relative;
    z-index: 1;
    width: calc(100% - 2rem);
    max-width: 46rem;
    margin: 1.5rem auto 2.5rem;
    padding: 2rem 1.5rem 3rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (min-width: 40rem) {
    .wrap {
        margin: 3rem auto 4rem;
        padding: 3rem 3rem 4rem;
    }
}


/* ---- Header ---------------------------------------------- */

.masthead {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.75rem;
    margin-bottom: 2.5rem;
}

/* Back arrow. Uses the same four-point star language as the button marks, so
   the only piece of chrome on the page belongs to the same family. The star
   points left, doubling as the arrow. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.back-link svg {
    flex: none;
    transition: transform .3s ease;
}

.back-link:hover {
    color: var(--fg);
}

.back-link:hover svg {
    transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .back-link svg { transition: none; }
}

.masthead h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

.lede {
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.contact-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.9375rem;
}


/* ---- Case study ------------------------------------------ */

.case {
    border-top: 1px solid var(--line);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
}

.case:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.case h2 {
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}

/* Plain-language summary, written for a reader who will not be
   reading the code. Keep it to two sentences. */
.summary {
    font-size: 1.0625rem;
    margin: 0 0 1.5rem;
}

.case h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.75rem 0 0.5rem;
}

.case p {
    margin: 0 0 1rem;
}


/* ---- Meta block ------------------------------------------ */

.meta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem 1.125rem;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.meta dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.meta dd {
    margin: 0;
}


/* ---- Tech tags ------------------------------------------- */

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0;
    margin: 1.25rem 0 0;
}

.tags li {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    background: var(--surface);
}


/* ---- Figures --------------------------------------------- */

.figures {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

figure {
    margin: 0;
}

figure img {
    border: 1px solid var(--line);
    border-radius: 6px;
    width: 100%;
}

figcaption {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 0.5rem;
}

/* Stand-in shown until a real screenshot replaces it. */
.shot-placeholder {
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
}


/* ---- Unfinished-content marker --------------------------- */
/* Obvious on purpose. Search the HTML for "todo" to find what's
   still outstanding, and delete these blocks as they're filled. */

.todo {
    border-left: 3px solid var(--accent-bright);
    background: var(--surface);
    padding: 0.875rem 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    color: var(--muted);
    border-radius: 0 4px 4px 0;
}

.todo strong {
    color: var(--fg);
}


/* ---- Footer ---------------------------------------------- */

.page-foot {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    padding-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}


/* ---- Wider screens --------------------------------------- */

@media (min-width: 40rem) {
    .wrap {
        padding: 3.5rem 2rem 5rem;
    }

    .masthead h1 {
        font-size: 2.25rem;
    }

    .case h2 {
        font-size: 1.625rem;
    }

    .meta {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.5rem;
    }

    .figures {
        grid-template-columns: repeat(2, 1fr);
    }

    /* A single figure shouldn't stretch to half width and look stranded. */
    .figures figure:only-child {
        grid-column: 1 / -1;
    }
}


/* ---- Print ----------------------------------------------- */
/* This is the kind of page that gets printed or saved to PDF and
   forwarded, so make that version readable. */

@media print {
    :root {
        --bg: #fff;
        --fg: #000;
        --muted: #444;
        --line: #ccc;
        --surface: #fff;
    }

    /* No colour field on paper — it would eat toner and hurt legibility. */
    .sy-field { display: none !important; }

    .wrap {
        max-width: none;
        margin: 0;
        padding: 0;
        width: auto;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    .case {
        break-inside: avoid;
    }

    .todo,
    .shot-placeholder {
        display: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}