/* Project page. Phone styles first, then desktop overrides.
   The words come first (title; what it is and what was made), then the pictures, which carry most
   of the page. Short writing sits between them; the facts are credits at the end. */

.project {
    padding: 20px var(--gutter) 0;
    font-size: 11pt;
    line-height: 1.5;
}

/* opening: title, then the description and what was made.
   Phones: title, then the picture, then the words. */
.project { display: flex; flex-direction: column; }
.opening { display: contents; }
.opening-title { order: 0; padding: 8px 0 28px; }   /* phones: one 28px gap between every block */
.hero { order: 1; }
.opening-text { order: 2; padding: 28px 0; }
.sections, .credits, .next-bar { order: 3; }
.opening h1 { font-size: 30pt; line-height: 1; }
.opening .meta { margin-top: 8px; }
.opening-text p + p { margin-top: 1em; }
.opening-text p { max-width: 58ch; }
.to-credits { display: inline-block; margin-top: 14px; }

/* "made": what the project turned into (and other short lists) */
.made { list-style: none; padding: 0; margin: 16px 0 0; }
.made li { position: relative; padding-left: 1.2em; }
.made li + li { margin-top: 0.4em; }
.made li::before { content: "→"; position: absolute; left: 0; }
.opening a, .part-text a, .credits a { text-decoration: underline; text-underline-offset: 2px; }

.hero img,
.hero video { display: block; width: 100%; height: auto; }
.hero { margin-bottom: 0; }

/* a short piece of writing between the pictures: a big heading, then the words */
.part-text { padding: 40px 0 28px; scroll-margin-top: 24px; }
.part-text h2 { font-size: 14pt; font-weight: 600; line-height: 1.2; margin-bottom: 10px; }   /* a second size: like the nav */
.part-words p + p { margin-top: 1em; }
.part-words { max-width: 62ch; }
.part-text .made { margin-top: 14px; }

/* credits at the end: bold headings, several across */
.credits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    padding: 48px 0 56px;
    scroll-margin-top: 24px;
    font-size: 10pt;
}
.credits h2 { font-weight: 600; margin-bottom: 2px; }
.credits p::first-letter { text-transform: uppercase; }

/* a note that follows the cursor over its picture (mouse only; see hoverNotes in js/project.js) */
.hover-note {
    position: fixed; left: 0; top: 0; z-index: 40;
    max-width: 300px;
    padding: 6px 9px;
    background: #fff; color: var(--red); border: 1.5px solid var(--red);
    font-size: 10pt; line-height: 1.4;
    pointer-events: none;
}
.hover-note[hidden] { display: none; }
figcaption.noted { display: none; }
/* touch screens: a picture's note pops up over it when tapped */
.has-tap-note { position: relative; }
.tap-note { display: none; }
.show-note .tap-note {
    display: block; position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0;
    padding: 6px 9px; background: #fff; color: var(--red); border: 1.5px solid var(--red);
    font-size: 9.5pt; line-height: 1.4;
}
@media (hover: none), (pointer: coarse) {
    .project-section > figcaption { display: none; }   /* a note for a whole block: kept off the page on phones */
}

/* credits in a sidebar (desktop): slides out from the right, under the nav */
.credits-close { display: none; }
@media (min-width: 601px) {
    body .credits {
        position: fixed; top: var(--header-bottom, 0px); right: 0; z-index: 45;
        display: block;
        width: 360px; height: calc(100vh - var(--header-bottom, 0px)); overflow-y: auto;
        margin: 0; padding: 48px 28px 32px;
        background: #fff; border-left: var(--line);
        transform: translateX(100%); transition: transform 0.35s ease;
    }
    body .credits.open { transform: none; }
    body .credits > div + div { margin-top: 18px; }
    body .credits-close { display: block; position: absolute; top: 14px; right: 20px; background: none; border: 0; color: var(--red); font: inherit; font-size: 20pt; line-height: 1; }
}
/* phones: credits open right under the link, as part of the page */
@media (max-width: 600px) {
    body .credits { display: none; padding: 16px 0 4px; }
    body .credits.open { display: grid; }
}

/* with a mouse, a part's writing is shown as notes on its pictures, so the text itself is hidden */
@media (hover: hover) and (pointer: fine) {
    .part-text.noted-part { display: none; }   /* only in the "hover" look */
    .project-section { padding-bottom: 24px; }
}
.hover-note b { font-weight: 600; }

/* images: one full width, or two across, with notes under them */
.project-section {
    padding-bottom: 28px;
}

.section-media {
    display: grid;
    gap: 28px;
}

.section-media picture { display: block; }
.section-media img,
.section-media video {
    display: block;
    width: 100%;
    height: auto;
}

/* a full-width loop stays full width but never taller than most of the screen, so its note still fits
   (a little of its top and bottom is trimmed on short screens) */
.layout-full .section-media video { max-height: 78vh; object-fit: cover; }

/* a single image fills the width; an upright (portrait) one never gets taller than the screen and sits centred */
.layout-full .portrait img,
.layout-full .portrait video {
    width: auto;
    max-width: 100%;
    max-height: 90vh;
    margin: 0 auto;
}

figcaption {
    font-size: 10pt;
    margin-top: 8px;
    max-width: 60ch;
}

/* a picture that turns over when clicked */
.flip { display: block; width: 100%; padding: 0; border: 0; background: none; perspective: 2000px; cursor: var(--cursor-click); }
.flip-inner { display: block; position: relative; transition: transform 0.7s ease; transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip img { display: block; width: 100%; height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* "dark": the block sits on black, like the posters and origami */
.dark .section-media {
    background: var(--black);
    padding: 20px;
}
.dark .section-media figcaption { color: #fff; }
/* notes for a black block sit under it, in the normal colour */
.dark > figcaption { margin-top: 10px; }
/* a single image or loop on black fills the band edge to edge, so every black block is the same width */
.dark.layout-full .section-media { padding: 0; }
.dark.layout-full .section-media img,
.dark.layout-full .section-media video { width: 100%; max-height: none; }
.layout-gallery .section-media { align-items: center; }

/* a row: everything side by side (3 across on phones) */
.layout-row .section-media { grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* pictures that give their shape share one height: each column is as wide as its picture */
.project-section.even .section-media { grid-auto-flow: row; grid-template-columns: var(--ratios); }

/* gallery: thumbnails; each opens full screen */
.layout-gallery .section-media { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.layout-gallery button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--cursor-open);
}
.layout-gallery button img { transition: opacity 0.15s; }
.layout-gallery button:hover img { opacity: 0.85; }

/* viewer: the big spot, then thumbnails (below on phones, a column on the right on desktop) */
.layout-viewer .section-media { gap: 12px; }
.viewer-stage {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-stage img,
.viewer-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.viewer-stage .zoomable { cursor: var(--cursor-open); }
.viewer-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
/* phones: arrows and a count instead of the thumbnails */
.viewer-nav { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px 0 14px; color: #fff; font-size: 11pt; }
.viewer-nav button { border: 0; background: none; padding: 4px 8px; color: inherit; font: inherit; font-size: 14pt; cursor: pointer; }
.layout-viewer:not(.dark):not([class*='tone-']) .viewer-nav, .tone-light .viewer-nav { color: var(--red); }
.viewer-nav { padding: 2px 0 0; }
@media (max-width: 600px) { .viewer-thumbs { display: none; } }
@media (min-width: 601px) { .viewer-nav { display: none; } }
/* with a mouse the note follows the cursor instead; touch screens of any size keep it under the picture */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) { .viewer-note { display: none; } }
.viewer-note { margin: 0; padding: 0 4px 16px; font-size: 10.5pt; text-align: center; color: #fff; }
.layout-viewer:not(.dark):not([class*='tone-']) .viewer-note, .tone-light .viewer-note { color: var(--red); }
.viewer-thumbs button {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: var(--cursor-click);
    opacity: 0.55;
    transition: opacity 0.15s;
}
.viewer-thumbs button:hover,
.viewer-thumbs button[aria-current="true"] { opacity: 1; }
.viewer-thumbs button[aria-current="true"] { border-color: rgba(255, 255, 255, 0.6); }
.viewer-thumbs img { display: block; width: 100%; height: auto; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--black);
    color: #fff;
}
.lightbox[hidden] { display: none; }

.lb-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lb-stage img {
    max-width: 100%;
    max-height: 100%;
    cursor: var(--cursor-open);
}
/* zoomed: the image at up to 2.5x the screen height; scrolls (and follows the mouse) inside the stage */
.lb-stage.zoomed {
    display: block;
    overflow: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.lb-stage.zoomed::-webkit-scrollbar { display: none; }
.lb-stage.zoomed img {
    max-width: none;
    max-height: none;
    height: 250vh;
    display: block;
    margin: 0 auto;
    cursor: zoom-out;
}

.lb-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* caption · arrows in the middle · count */
    align-items: baseline;
    gap: 16px;
    padding: 12px var(--gutter) 16px;
    font-size: 11pt;
}
.lb-nav { display: flex; gap: 22px; align-items: baseline; }
.lb-nav button,
.lb-close {
    background: none;
    border: 0;
    padding: 0 2px;
    color: #fff;
    font: inherit;
    font-size: 14pt;
}
.lb-count { opacity: 0.6; justify-self: end; }
.lb-close { position: absolute; top: 12px; right: var(--gutter); z-index: 1; font-size: 20pt; line-height: 1; }

/* previous / next: plain text, no line above */
.next-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* previous · top · next */
    align-items: baseline;
    gap: 16px;
    padding: 24px 0 32px;
}
.next-link.prev { justify-self: start; }
.next-link.next { justify-self: end; }
/* phones: previous and next side by side (long titles wrap onto two lines), top underneath */
@media (max-width: 600px) {
    .next-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "prev next" "top top"; row-gap: 20px; }
    .next-link.prev { grid-area: prev; }
    .next-link.next { grid-area: next; }
    .to-top { grid-area: top; justify-self: center; }
    .next-link .name { white-space: nowrap; }
    .next-link.long .name { white-space: normal; max-width: 12ch; text-wrap: balance; }
    .next-link.next .name { text-align: right; }
}

.next-link { position: relative; }
.next-link .label { display: inline-flex; align-items: baseline; gap: 0.35em; }
.next-link .arrow { flex: none; }
.next-link.next { text-align: right; }

.peek { display: none; }

.not-found { padding: 40px 0; }

@media (min-width: 601px) {
    .project {
        padding-top: 28px;
        font-size: 12pt;
    }

    /* desktop: the words first, then the picture */
    .opening { display: grid; order: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 40px 0; align-items: start; }
    .opening-title, .opening-text { padding: 0; }
    .hero { order: 1; margin-bottom: 32px; }
    .opening h1 { font-size: 48pt; }

    /* section writing on five columns: the heading across, the words over the first three, a list in the last two */
    /* one column: a clear break before each part, a bold heading, the words, then what was made */
    .part-text { display: block; padding: 104px 0 36px; }
    .part-text h2 { font-size: 18pt; font-weight: 600; margin-bottom: 12px; }
    .part-words { max-width: 70ch; }
    .part-text .made { margin-top: 16px; max-width: 70ch; }

    .credits { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 72px 0 64px; font-size: 11pt; }

    .project-section { padding-bottom: 32px; }
    figcaption { font-size: 11pt; }
    /* notes under a full-width block run the whole width of the picture */
    .layout-full figcaption,
    .layout-pair figcaption,
    .project-section > figcaption { max-width: none; }

    .layout-trio .section-media { grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; }

    .dark .section-media { padding: 40px; }
    .layout-row .section-media,
    .layout-gallery .section-media { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
    .layout-viewer .section-media { grid-template-columns: minmax(0, 1fr) 84px; gap: 24px; align-items: start; }
    .viewer-thumbs { grid-template-columns: none; gap: 10px; }
    /* "centred": the big picture is centred in the whole black band (not beside the thumbnails),
       no taller than most of the screen; the thumbnails sit over the right edge, from the top */
    .centred.layout-viewer .section-media { display: block; position: relative; padding: 48px 140px; }
    .centred .viewer-stage { aspect-ratio: auto; height: min(72vh, 62vw); }
    .tone-light.centred .viewer-stage { height: min(80vh, 66vw); }   /* the book covers: a little bigger */
    .centred .viewer-thumbs { position: absolute; right: 36px; top: 48px; width: 64px; gap: 8px; max-height: calc(100% - 96px); overflow-y: auto; scrollbar-width: none; }
    .centred .viewer-thumbs::-webkit-scrollbar { display: none; }
    /* "fill": the picture covers the whole band, running off its edges */
    .fill.layout-viewer .section-media { padding: 0; }
    .fill .viewer-stage img, .fill .viewer-stage video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
    .fill .viewer-stage { height: auto; aspect-ratio: var(--stage-ratio, 1.6); }
    .fill .viewer-thumbs { top: 24px; max-height: calc(100% - 48px); }
    .has-columns .section-media { grid-auto-flow: row; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 32px; padding: 48px 12%; }
    .lb-stage { padding: 32px; }

    .layout-pair .section-media {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
    }

    /* hovering previous / next shows a small preview */
    .peek {
        display: block;
        width: 220px;
        pointer-events: none;
        visibility: hidden;
        z-index: 5;
    }
    .next-link:hover .peek { visibility: visible; }

    /* centred just above the link text */
    .peek {
        position: absolute;
        bottom: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);
    }

    .peek video,
    .peek img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* the switcher for comparing looks (only with ?try) */
.look-switcher { position: fixed; left: 12px; bottom: 12px; z-index: 50; background: #fff; border: 1.5px solid var(--red); padding: 8px 10px; font-size: 9pt; }
.look-switcher span { display: inline-block; margin-right: 8px; }
.look-switcher button { font: inherit; color: var(--red); background: none; border: 1px solid var(--red); padding: 1px 7px; margin-right: 4px; border-radius: 999px; }
.look-switcher button[aria-pressed="true"] { background: var(--red); color: #fff; }

/* a softer black band (the spreads sit on the same tone) */
.tone-dim .section-media { background: #18191b; }
/* the cookbook's pink (the hero's background) */
.tone-blush .section-media { background: #f3d5ce; }
/* "bleed": a "fill" viewer that also covers the band on phones, so the pictures' cut edges always
   run off it; on phones the arrows and count sit over the bottom of the picture, not in a bar under it */
.bleed.layout-viewer .section-media { padding: 0; position: relative; }
.bleed .viewer-stage { aspect-ratio: var(--stage-ratio, 1.6); }
.bleed .viewer-stage img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
@media (max-width: 600px) {
    .bleed .viewer-stage { aspect-ratio: var(--stage-ratio-phone, var(--stage-ratio, 1.6)); }
    .bleed .viewer-nav { position: absolute; left: 0; right: 0; bottom: 4px; padding: 0; color: var(--red); text-shadow: 0 0 6px rgba(243, 213, 206, 0.95), 0 0 2px rgba(243, 213, 206, 0.95); }
}
.tone-blush .viewer-nav, .tone-blush .viewer-note { color: var(--red); }
.tone-blush .viewer-thumbs button[aria-current="true"] { border-color: rgba(0, 0, 0, 0.35); }
/* a light band, the grey the cover mockups sit on */
.tone-light .section-media { background: #f3f3f3; }
.tone-light .viewer-thumbs button[aria-current="true"] { border-color: rgba(0, 0, 0, 0.35); }

/* v3: the opening as the pages first were, one column: title, words, what was made, the facts */
.made-plain { margin-top: 1em; }
.made-plain p + p { margin-top: 0.35em; }
.opening-text .made-plain p { max-width: 70ch; }
.facts { margin-top: 1.2em; font-size: 11pt; max-width: 70ch; }
.facts b { font-weight: 600; }
.facts span + span::before { content: "  ·  "; white-space: pre; }
@media (min-width: 601px) {
    .opening { display: block; padding: 48px 0 36px; }
    .opening-text { margin-top: 28px; }
    .opening-text p { max-width: 70ch; }
}

/* posts: drawn the way Instagram shows a post, in a row that scrolls sideways, on a pale green band */
.layout-posts { background: #C2D0AF; }
.posts-row { position: relative; }
.layout-posts .section-media {
    display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 40px 28px 22px; scrollbar-width: none; scroll-snap-type: x proximity;
}
.layout-posts .section-media::-webkit-scrollbar { display: none; }
.post {
    flex: 0 0 min(300px, 74vw); scroll-snap-align: center; margin: 0;
    background: #fff; border-radius: 18px; overflow: hidden; color: #000;
    font: 400 13px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 5px 14px rgba(40, 45, 20, 0.16);
}
.post b { font-weight: 600; }
.post svg { width: 24px; height: 24px; fill: currentColor; display: block; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.layout-posts .post .post-avatar { width: 32px; height: 32px; max-width: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #dbdbdb; }
.post-more { margin-left: auto; }
.post-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #efefef; }
.post-slides { display: flex; height: 100%; transition: transform 0.3s ease; }
.layout-posts .post-slides > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.post-count { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 12px; background: rgba(18, 18, 18, 0.7); color: #fff; font-size: 12px; }
.post-clip { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
.post-step { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: #262626; cursor: pointer; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); }
.post-step[hidden] { display: none; }
.post-step svg { width: 14px; height: 14px; }
.post-step.prev { left: 8px; } .post-step.next { right: 8px; }
.post-dots { display: flex; justify-content: center; gap: 4px; padding-top: 10px; margin-bottom: -6px; }
.post-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a8a8a8; }
.post-dots i.on { background: #0095f6; }
.post-icons { display: flex; align-items: center; gap: 16px; padding: 12px 12px 6px; }
.post-icons span { flex: 1; }
.post-likes { padding: 0 12px; font-weight: 600; margin: 0; }
.post-caption { padding: 4px 12px 0; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-caption.open { display: block; }
.post-open { border: 0; background: none; padding: 0 12px; color: #737373; font: inherit; cursor: pointer; }
.post-date { padding: 6px 12px 14px; margin: 0; color: #737373; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.posts-nav { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 20px 20px; font-size: 11pt; color: var(--red); }
.posts-arrow { border: 0; background: none; padding: 0; color: var(--red); font: inherit; font-size: 14pt; cursor: pointer; }
.posts-arrow:disabled { opacity: 0.3; cursor: default; }
.layout-posts { margin-bottom: 28px; padding-bottom: 0 !important; }
@media (max-width: 600px) { .tall .viewer-stage { aspect-ratio: 4 / 5; } }
@media (min-width: 601px) {
    .layout-posts .section-media { padding: 60px 72px 22px; gap: 28px; }
    .post { flex-basis: 300px; }
    .posts-nav { padding: 0 40px 20px; }
    .layout-posts { margin-bottom: 40px; }
}