/* Shared styles for featured project pages (/open-sdk, and the next ones).
   Type and colour match index.html and projects.html.

   Blocks available to a page, in the order they normally appear:
     .back            — one door home, top left
     .intro           — optional wrapper: .intro-head (the h1) + .project-head
                        + the first figure in one container, so on narrow
                        screens the title parks at the top while the intro
                        scrolls, then hands off to the first sticky chapter
                        heading. Without it the h1 just lives in .project-head.
     .project-head    — h1 + .project-meta
     .project-lede    — what the thing is, display size, ink. A sentence, and
                        at most one more naming who made it. Never a paragraph.
     .project-figure  — a picture at full column width, optional <figcaption>
     .project-figure.pair — two pictures side by side, stacks under 700px
     .project-section — optional <h2> + .project-prose. A heading names the
                        fact in the section, or the section has no heading.
     .project-end     — the two ways out: back to the top, and back to the site
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* the chevron and the footnote marker both jump; neither should teleport */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    justify-content: center;
    padding: 32px;
    background: #fff;
}

.project-page {
    width: 100%;
    max-width: 890px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 56px;
}

/* The way back, top left. Same control as the modal nav buttons on
   /projects: no frame, a 52px target, a 28px chevron at 2.5 with round
   caps, and a small scale on press. */
.back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 8px;
    color: #000;
    background: transparent;
    border-radius: 50%;
    align-self: flex-start;
    margin-bottom: -16px;
    transition: transform 0.1s ease-out;
}

.back:active {
    transform: scale(0.95);
}

.back:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.back svg {
    display: block;
    width: 28px;
    height: 28px;
}

.back path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title, date and lede are one group: the name, then the answer to it. */
.project-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.project-head h1,
.intro-head h1 {
    font-size: 64px;
    color: #000;
    font-weight: 600;
    line-height: 1;
}

/* The intro reproduces the page rhythm it replaces: title to meta is the
   .project-head gap, head to figure is the .project-page gap. */
.intro {
    display: flex;
    flex-direction: column;
}

.intro .project-head { margin-top: 24px; }
.intro .project-figure { margin-top: 80px; }

/* Narrow (same break as schematic.css): the title parks under the status bar
   exactly like the chapter headings, so something is always parked while you
   scroll — the h1 holds the spot through the intro, then Brand setup takes
   over. Same white bar, rule, and z as .chapter-head in schematic.css. */
@media (max-width: 860px) {
    .intro-head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 18px 0 14px;
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
    }

    .intro-head h1 { font-size: 32px; letter-spacing: -0.02em; }
}

.project-meta {
    font-size: 24px;
    color: #494949;
    font-weight: 500;
}

.project-lede {
    font-size: 33px;
    color: #000;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 16px;
}

.project-figure {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.project-figure.pair {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.project-figure figcaption {
    font-size: 17px;
    color: #494949;
    font-weight: 500;
    line-height: 1.4;
}

.project-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.project-section h2 {
    font-size: 48px;
    color: #000;
    font-weight: 600;
    line-height: 1;
}

.project-prose {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 720px;
}

.project-prose p {
    font-size: 24px;
    color: #494949;
    font-weight: 500;
    line-height: 1.4;
}

/* The end: two squares, left goes home, up goes to the top of the page.
   Chevrons are drawn in the same hairline language as the wireframes and
   hover the same way — the stroke puts on weight, nothing moves.

   Hover thickens the frame with an inset shadow rather than a fatter border,
   because growing a border by a pixel would reflow the square. */
.project-end {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding-top: 24px;
}

/* These keep their frame — they are big, singular buttons, not a nav row.
   The chevron is the site's, with round caps and joins; the weight is held
   in px by non-scaling-stroke so the square can grow without the line
   growing with it. */
.end-btn {
    --sw: 5;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid #000;
    color: #000;
    transition: box-shadow 200ms ease, transform 0.1s ease-out;
}

.end-btn:hover {
    --sw: 6.5;
    box-shadow: inset 0 0 0 1px currentColor;
}

.end-btn:active {
    transform: scale(0.99);
}

.end-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

.end-btn svg {
    display: block;
    width: 50%;
    height: auto;
}

.end-btn path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--sw);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke-width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .back,
    .end-btn,
    .end-btn path { transition: none; }
}

@media (max-width: 700px) {
    .project-page {
        gap: 56px;
        margin-bottom: 40px;
    }

    .project-meta,
    .project-prose p {
        font-size: 17px;
    }

    /* 44px keeps the HIG minimum tap target; the chevron stays at its
       desktop 28px so the glyph doesn't read smaller than it taps. */
    .back {
        width: 44px;
        height: 44px;
        margin-bottom: -8px;
    }

    .project-head {
        gap: 16px;
    }

    .project-head h1 {
        font-size: 32px;
    }

    .intro .project-head { margin-top: 16px; }
    .intro .project-figure { margin-top: 56px; }

    .project-lede {
        font-size: 22px;
        margin-top: 8px;
    }

    .project-figure {
        gap: 16px;
    }

    .project-figure.pair {
        flex-direction: column;
    }

    .project-figure figcaption {
        font-size: 15px;
    }

    .project-section {
        gap: 24px;
    }

    .project-section h2 {
        font-size: 24px;
    }

    .project-prose {
        gap: 20px;
    }

    .project-end {
        gap: 12px;
        padding-top: 8px;
    }
}