/* =============================================================
   Produced with Pointer: field studies (index + Cowboys & Caftans)
   Loaded after styles.css and editorial.css, by the field-study pages only.
   Same editorial language as the homepage (type, tokens, tags, buttons come from
   editorial.css) with its own compositions. Scoped to body.is-fieldstudy / .fs-*.
   Static: no animation, no scroll effects.
   ============================================================= */

body.is-fieldstudy {
    --fs-dusk: #0A0E1F;
    /* twilight, drawn from the cobalt hat */
    --fs-sand: #E9DCC8;
    --fs-gap: clamp(10px, 1.4vw, 20px);
}

.fs-photo,
.fs-fig {
    margin: 0;
}

.fs-photo img,
.fs-fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ed-radius);
}

/* Section label used on both pages: "01 · The collection" */
.fs-label {
    margin: 0 0 18px;
    font: 500 .75rem/1.4 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

.fs-on-paper .fs-label,
.fs-on-paper .ed-kicker {
    color: var(--ed-paper-muted);
}

.fs-on-paper {
    background: var(--ed-paper);
    color: var(--ed-paper-ink);
}

.fs-on-sand {
    background: var(--fs-sand);
    color: var(--ed-paper-ink);
}

.fs-on-sand .fs-label,
.fs-on-sand .ed-kicker {
    color: var(--ed-paper-muted);
}

.fs-on-dusk {
    background: var(--fs-dusk);
    color: var(--ed-bone);
}

.fs-on-ink {
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.fs-section {
    padding-block: clamp(72px, 10vw, 148px);
}

/* =============================================================
   COWBOYS & CAFTANS
   ============================================================= */

/* ---------- Cover: a triptych of full-height photographs, title across the foot ---------- */
.fs-cover {
    position: relative;
    display: grid;
    align-items: end;
    min-height: max(100vh, 600px);
    min-height: max(100svh, 600px);
    overflow: hidden;
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.fs-cover__panels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.fs-cover__panel {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.fs-cover__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.fs-cover__panel:nth-child(1) img {
    object-position: 46% 30%;
}

.fs-cover__panel:nth-child(2) img {
    object-position: 50% 18%;
}

.fs-cover__panel:nth-child(3) {
    display: none;
}

.fs-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 4, 5, .72) 0, rgba(5, 4, 5, .25) 16%, rgba(5, 4, 5, 0) 32%, rgba(5, 4, 5, 0) 40%, rgba(5, 4, 5, .78) 76%, rgba(5, 4, 5, .96) 100%);
    pointer-events: none;
}

.fs-cover__copy {
    position: relative;
    z-index: 1;
    width: min(1280px, 100% - var(--ed-gutter) * 2);
    margin: 0 auto;
    padding: 120px 0 clamp(32px, 5vw, 64px);
}

.fs-cover__eyebrow {
    margin: 0 0 clamp(14px, 2vw, 24px);
    font: 500 .74rem/1.5 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-bone);
}

.fs-cover__eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(241, 230, 214, .55);
}

.fs-cover__eyebrow a:hover {
    border-bottom-color: var(--ed-bone);
}

.fs-cover h1 {
    margin: 0;
    font: 400 clamp(3.4rem, 17vw, 5.4rem)/.88 var(--ed-serif);
    letter-spacing: -.025em;
    color: var(--ed-bone);
    text-wrap: balance;
}

.fs-cover__sub {
    margin: clamp(14px, 2vw, 26px) 0 0;
    font: italic 400 clamp(1.45rem, 5.6vw, 2.6rem)/1.08 var(--ed-serif);
    letter-spacing: -.01em;
    color: var(--ed-bone);
}

.fs-cover__meta {
    margin: clamp(18px, 2.4vw, 30px) 0 0;
    font: 500 .78rem/1.5 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-sand);
}

@media (min-width: 720px) {
    .fs-cover__panels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fs-cover__panel:nth-child(3) {
        display: block;
    }

    .fs-cover h1 {
        font-size: clamp(5.2rem, 12.2vw, 12rem);
        white-space: nowrap;
    }

    .fs-cover__sub {
        font-size: clamp(1.9rem, 3.4vw, 3.4rem);
    }
}

/* ---------- Cover on phones (< 720px): the three photographs become a horizontal carousel ----------
   One photograph at a time, shown at its own 3:4 proportions (every cover image is 1200 x 1600), so nothing is
   stretched or cropped. Native scrolling and scroll-snap; no autoplay. The title block (.fs-cover__copy) is a
   separate layer in the same grid cell and never moves with the slides. The pager is created for phones by
   the script at the end of the page and stays hidden without it. Tablet and desktop keep the triptych above. */
.fs-cover__pager {
    display: none;
}

@media (max-width: 719px) {
    .fs-cover {
        --fs-p: 133.334vw;
        /* height of one 3:4 slide */
    }

    .fs-cover__panels {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        align-self: start;
        display: flex;
        gap: 0;
        width: 100%;
        aspect-ratio: 3 / 4;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .fs-cover__panels::-webkit-scrollbar {
        display: none;
    }

    .fs-cover__panel {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .fs-cover__panel:nth-child(3) {
        display: block;
    }

    body.is-editorial .fs-cover__panels:focus-visible {
        outline: 2px solid var(--ed-bone);
        outline-offset: -8px;
    }

    /* the dark wash is laid over the photograph (not the whole cover) and melts into the ink below it */
    .fs-cover::after {
        background: linear-gradient(to bottom, rgba(5, 4, 5, .72) 0, rgba(5, 4, 5, .25) calc(var(--fs-p) * .14), rgba(5, 4, 5, 0) calc(var(--fs-p) * .28), rgba(5, 4, 5, 0) calc(var(--fs-p) * .5), rgba(5, 4, 5, .82) calc(var(--fs-p) * .86), var(--ed-ink) var(--fs-p));
    }

    .fs-cover__copy {
        grid-area: 1 / 1;
        align-self: end;
    }

    html.fs-carousel .fs-cover__pager {
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 2;
        top: 64px;
        left: calc(var(--ed-gutter) - 8px);
        padding-right: 14px;
        border-radius: 999px;
        background: rgba(5, 4, 5, .6);
    }

    .fs-cover__dot {
        appearance: none;
        display: grid;
        place-items: center;
        width: 40px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .fs-cover__dot::before {
        content: "";
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: var(--ed-bone);
        opacity: .6;
        transition: width .25s ease, opacity .25s ease;
    }

    .fs-cover__dot[aria-current="true"]::before {
        width: 28px;
        opacity: 1;
    }

    .fs-cover__count {
        margin-left: 4px;
        font: 500 .66rem/1 var(--ed-mono);
        letter-spacing: .14em;
        color: var(--ed-bone);
    }
}

/* a phone held sideways: show each whole photograph (letterboxed) rather than a 3:4 slide wider than the screen */
@media (max-width: 719px) and (orientation: landscape) {
    .fs-cover {
        --fs-p: max(100svh, 320px);
    }

    .fs-cover__panels {
        aspect-ratio: auto;
        height: max(100svh, 320px);
    }

    .fs-cover__panel {
        background: var(--ed-ink);
    }

    .fs-cover__panel img {
        object-fit: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-cover__dot::before {
        transition: none;
    }
}

/* ---------- Opening: a quiet typographic spread on sand ---------- */
.fs-open__grid {
    display: grid;
    gap: 40px;
}

.fs-open__rail {
    font: 400 .8rem/1.7 var(--ed-mono);
    letter-spacing: .03em;
    color: var(--ed-paper-muted);
}

.fs-open__rail strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ed-paper-ink);
}

.fs-open__rail p {
    margin: 0 0 22px;
}

.fs-credit {
    padding-top: 16px;
    border-top: 1px solid var(--ed-paper-line);
    font: 400 .86rem/1.6 var(--ed-mono);
    letter-spacing: .01em;
}

.fs-deck {
    margin: 0;
    font: 400 clamp(2.5rem, 6.2vw, 5.4rem)/1 var(--ed-serif);
    letter-spacing: -.02em;
    text-wrap: balance;
}

.fs-deck--2 {
    margin-top: clamp(22px, 3vw, 40px);
    font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    line-height: 1.28;
    letter-spacing: -.005em;
    color: var(--ed-paper-muted);
    max-width: 34rem;
}

.fs-prose {
    max-width: 36rem;
    margin-top: clamp(32px, 4.5vw, 64px);
}

.fs-prose p {
    margin: 0 0 1.15em;
    font-size: 1.06rem;
    line-height: 1.7;
}

.fs-sign {
    margin: clamp(36px, 5vw, 64px) 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--ed-paper-line);
    font: 400 clamp(1.7rem, 2.8vw, 2.4rem)/1.18 var(--ed-serif);
    letter-spacing: -.01em;
    max-width: 30rem;
}

.fs-sign em {
    color: var(--ed-cobalt);
}

@media (min-width: 900px) {
    .fs-open__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
        gap: clamp(40px, 6vw, 112px);
    }

    .fs-open__rail {
        position: sticky;
        top: 96px;
        align-self: start;
    }
}

/* ---------- The collection: heading across, photograph set off to one side ---------- */
.fs-collection__grid {
    display: grid;
    gap: 36px;
    margin-top: clamp(32px, 5vw, 64px);
}

.fs-collection__photo {
    max-width: 520px;
}

.fs-collection__copy p {
    margin: 0 0 1.15em;
    max-width: 30rem;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--ed-muted);
}

.fs-collection__copy p.fs-deck--2 {
    margin: 0 0 28px;
    font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    line-height: 1.28;
    color: var(--ed-bone);
}

@media (min-width: 900px) {
    .fs-collection__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
        gap: clamp(48px, 8vw, 128px);
        align-items: center;
    }

    .fs-collection__photo {
        order: 2;
        max-width: none;
    }
}

/* ---------- The journey: a typographic route on twilight ---------- */
.fs-route {
    list-style: none;
    margin: clamp(36px, 5vw, 72px) 0 0;
    padding: 0 0 0 36px;
    position: relative;
}

.fs-route::before {
    content: "";
    position: absolute;
    left: 7px;
    top: .9em;
    bottom: .9em;
    border-left: 2px dashed rgba(231, 218, 198, .38);
}

.fs-route li {
    position: relative;
    padding: clamp(10px, 1.6vw, 22px) 0;
    font: 400 clamp(2.4rem, 7.4vw, 6.6rem)/1 var(--ed-serif);
    letter-spacing: -.02em;
}

.fs-route li::before {
    content: "";
    position: absolute;
    left: -35px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--fs-dusk);
    border: 2px solid var(--ed-bone);
}

.fs-route li:nth-child(2) {
    padding-left: clamp(0px, 4vw, 72px);
}

.fs-route li:nth-child(3) {
    padding-left: clamp(0px, 8vw, 144px);
}

.fs-route small {
    display: block;
    margin-bottom: 6px;
    font: 500 .72rem/1 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

.fs-journey__text {
    display: grid;
    gap: 28px;
    margin-top: clamp(40px, 6vw, 88px);
}

.fs-journey__text p {
    margin: 0 0 1.1em;
    max-width: 32rem;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--ed-muted);
}

.fs-journey__text p.fs-journey__statement {
    margin: 0;
    font: 400 clamp(1.6rem, 2.8vw, 2.5rem)/1.2 var(--ed-serif);
    letter-spacing: -.01em;
    color: var(--ed-bone);
    max-width: 30rem;
}

.fs-journey__statement em {
    display: block;
    margin-top: .5em;
}

@media (min-width: 900px) {
    .fs-journey__text {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: clamp(40px, 7vw, 120px);
        align-items: start;
    }
}

/* ---------- The field test ---------- */
.fs-test__grid {
    display: grid;
    gap: 36px;
}

.fs-test__prose p {
    margin: 0 0 1.15em;
    max-width: 34rem;
    font-size: 1.06rem;
    line-height: 1.7;
}

.fs-test__prose .fs-pull {
    font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.22 var(--ed-serif);
    letter-spacing: -.01em;
}

.fs-ledger {
    list-style: none;
    margin: clamp(28px, 4vw, 48px) 0;
    padding: 0;
    max-width: 34rem;
    border-top: 1px solid var(--ed-paper-line);
}

.fs-ledger li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ed-paper-line);
    font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.22 var(--ed-serif);
}

.fs-ledger li::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: .5em;
    border-radius: 50%;
}

.fs-ledger .is-complete::before {
    background: var(--ed-cobalt);
}

.fs-ledger .is-ongoing::before {
    border: 1.5px solid var(--ed-paper-muted);
}

.fs-ledger small {
    grid-column: 2;
    font: 500 .7rem/1 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-paper-muted);
}

@media (min-width: 900px) {
    .fs-test__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: clamp(40px, 7vw, 120px);
    }

    .fs-test__head {
        position: sticky;
        top: 96px;
        align-self: start;
    }
}

/* ---------- Field test: capture-to-publication evidence (C.3) ----------
   Five authentic screenshots: Studio's results screen before and after Tune
   (same displayed width, for direct comparison), then all three published
   Instagram frames, in order. Never a fabricated before/after comparison. */
.fs-evidence {
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--ed-paper-line);
}

.fs-evidence__progression {
    margin: 28px 0 0;
    max-width: 42rem;
}

.fs-evidence__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.fs-evidence__grid {
    margin: 0;
}

.fs-evidence__grid img,
.fs-evidence__ig-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ed-radius);
}

.fs-evidence__stage-label {
    margin: 10px 0 0;
    font: 500 .72rem/1.4 var(--ed-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ed-paper-muted);
}

.fs-evidence__step-arrow {
    margin: 20px 0;
    font-size: 1.1rem;
    color: var(--ed-paper-muted);
}

.fs-evidence__ig {
    margin-top: 20px;
}

.fs-evidence__ig-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 14px;
}

.fs-evidence__ig-frame {
    margin: 0;
}

.fs-evidence__caption {
    margin-top: 22px;
    max-width: 34rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ed-paper-muted);
}

.fs-evidence__note {
    margin-top: 22px;
    max-width: 34rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ed-muted);
}

@media (min-width: 640px) {
    .fs-evidence__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fs-evidence__ig-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- The work: gallery in three places ---------- */
.fs-work__head {
    padding-bottom: clamp(24px, 4vw, 56px);
}

.fs-group {
    padding-block: clamp(64px, 9vw, 128px);
}

.fs-group__head {
    max-width: 44rem;
    margin-bottom: clamp(32px, 5vw, 72px);
}

.fs-group__title {
    margin: 0;
    font: 400 clamp(2.1rem, 4.6vw, 4rem)/1.04 var(--ed-serif);
    letter-spacing: -.015em;
    text-wrap: balance;
}

.fs-group__head .ed-lead {
    margin-top: 18px;
    max-width: 30rem;
}

/* a lead pair: one large frame, one smaller, set off against each other */
.fs-lead {
    display: grid;
    gap: var(--fs-gap);
}

.fs-lead .fs-photo {
    aspect-ratio: 4 / 5;
}

.fs-lead .fs-photo:nth-child(2) {
    aspect-ratio: 3 / 4;
}

/* the wall: staggered contact sheet. New photographs are simply appended. */
.fs-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-gap);
    margin-top: var(--fs-gap);
    padding-bottom: 28px;
}

.fs-wall .fs-photo {
    aspect-ratio: 3 / 4;
}

.fs-wall .fs-photo:nth-child(even) {
    transform: translateY(24px);
}

.fs-pending {
    max-width: 34rem;
    padding: 22px 24px;
    border: 1px dashed var(--ed-paper-line);
    border-radius: var(--ed-radius);
    font: 400 .84rem/1.6 var(--ed-mono);
    letter-spacing: .02em;
    color: var(--ed-paper-muted);
}

.fs-more {
    display: grid;
    gap: var(--fs-gap);
}

.fs-more .fs-photo {
    aspect-ratio: 3 / 4;
}

.fs-more__caption {
    margin: 14px 0 0;
    font: 400 .76rem/1.5 var(--ed-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

/* ---------- Closing photographs: brand attribution (C.3) ---------- */
.fs-more__credit {
    margin: clamp(28px, 4vw, 44px) 0 0;
}

@media (min-width: 720px) {
    .fs-lead {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
    }

    .fs-lead .fs-photo:nth-child(1) {
        grid-column: 1 / span 7;
    }

    .fs-lead .fs-photo:nth-child(2) {
        grid-column: 9 / span 4;
    }

    .fs-lead--flip .fs-photo:nth-child(1) {
        grid-column: 1 / span 4;
        grid-row: 1;
        aspect-ratio: 3 / 4;
    }

    .fs-lead--flip .fs-photo:nth-child(2) {
        grid-column: 6 / span 7;
        aspect-ratio: 4 / 5;
    }

    .fs-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* three columns: only the middle column steps down */
    .fs-wall .fs-photo:nth-child(2n) {
        transform: none;
    }

    .fs-wall .fs-photo:nth-child(3n + 2) {
        transform: translateY(24px);
    }

    .fs-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .fs-wall {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fs-wall .fs-photo:nth-child(3n + 2) {
        transform: none;
    }

    /* four columns: columns 2 and 4 step down */
    .fs-wall .fs-photo:nth-child(4n + 2),
    .fs-wall .fs-photo:nth-child(4n + 4) {
        transform: translateY(40px);
    }

    .fs-wall {
        padding-bottom: 48px;
    }

    /* a wall of five reads as one row on desktop; append more and drop this modifier */
    .fs-wall--five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .fs-wall--five .fs-photo:nth-child(4n + 2),
    .fs-wall--five .fs-photo:nth-child(4n + 4) {
        transform: none;
    }

    .fs-wall--five .fs-photo:nth-child(5n + 2),
    .fs-wall--five .fs-photo:nth-child(5n + 4) {
        transform: translateY(40px);
    }
}

/* ---------- Inline cross-promotion links within running prose (C.2): inherit the
   paragraph's own (already-accessible) color rather than the browser's default
   blue, which failed contrast against both the dusk and sand backgrounds. ---------- */
.fs-prose a,
.fs-journey__text a,
.fs-evidence__note a,
.fs-open__rail a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
    opacity: .88;
}

.fs-prose a:hover,
.fs-journey__text a:hover,
.fs-evidence__note a:hover,
.fs-open__rail a:hover {
    opacity: 1;
}

/* ---------- Shop the collection: compact outbound links (C.2) ---------- */
.fs-shop__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
}

/* ---------- Closing: one last full-bleed frame ---------- */
.fs-end {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(100vh, 900px);
    min-height: min(100svh, 900px);
    padding-block: clamp(64px, 9vw, 128px);
    overflow: hidden;
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.fs-end__photo {
    position: absolute;
    inset: 0;
    margin: 0;
}

.fs-end__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 34%;
}

.fs-end__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 4, 5, .97) 0, rgba(5, 4, 5, .88) 38%, rgba(5, 4, 5, .25) 74%, rgba(5, 4, 5, .35) 100%);
}

.fs-end__copy {
    position: relative;
    z-index: 1;
}

.fs-end__copy h2 {
    margin: 0;
    font: 400 clamp(2.7rem, 7.4vw, 6.4rem)/.96 var(--ed-serif);
    letter-spacing: -.022em;
}

.fs-end__copy h2 em {
    display: block;
}

.fs-end__copy p {
    margin: 0 0 1em;
    max-width: 32rem;
    font-size: 1.08rem;
    line-height: 1.65;
}

.fs-end__lines {
    margin-top: clamp(24px, 3.4vw, 44px);
}

.fs-end__credit {
    margin-top: 28px;
    padding-top: 16px;
    max-width: 32rem;
    border-top: 1px solid var(--ed-line);
    font: 400 .82rem/1.6 var(--ed-mono);
    color: var(--ed-muted);
}

@media (min-width: 900px) {
    .fs-end__photo img {
        object-position: 50% 22%;
    }

    .fs-end__photo::after {
        background: linear-gradient(to right, rgba(5, 4, 5, .94) 0, rgba(5, 4, 5, .8) 34%, rgba(5, 4, 5, .05) 70%), linear-gradient(to top, rgba(5, 4, 5, .55) 0, rgba(5, 4, 5, 0) 34%);
    }
}

/* =============================================================
   PRODUCED WITH POINTER: index
   ============================================================= */
.fs-mast {
    padding: clamp(120px, 15vw, 190px) 0 clamp(48px, 7vw, 96px);
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.fs-mast h1 {
    margin: 0;
    font: 400 clamp(3.4rem, 11vw, 9.4rem)/.9 var(--ed-serif);
    letter-spacing: -.025em;
    text-wrap: balance;
}

.fs-mast h1 em {
    display: block;
}

.fs-mast .ed-lead {
    max-width: 38rem;
    color: var(--ed-bone);
}

.fs-spread {
    display: grid;
}

.fs-panel {
    position: relative;
    padding: clamp(48px, 6vw, 96px) var(--ed-gutter);
    overflow: hidden;
}

.fs-panel__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 640px;
}

.fs-panel h2 {
    margin: 0;
    font: 400 clamp(2.8rem, 6vw, 5.2rem)/.94 var(--ed-serif);
    letter-spacing: -.022em;
}

.fs-panel h2 em {
    display: block;
}

.fs-panel__meta {
    margin: 18px 0 0;
    font: 500 .74rem/1.5 var(--ed-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.fs-panel__text {
    margin: 22px 0 0;
    max-width: 30rem;
    font-size: 1.04rem;
    line-height: 1.65;
}

.fs-panel__credit {
    margin: 14px 0 0;
    max-width: 30rem;
    font: 400 .82rem/1.6 var(--ed-mono);
}

.fs-panel .ed-link {
    margin-top: 28px;
}

/* Study 01: paper, a dense mosaic: a practice, repeated */
.fs-panel--01 {
    background: var(--ed-paper);
    color: var(--ed-paper-ink);
}

.fs-panel--01 .ed-kicker,
.fs-panel--01 .fs-panel__meta,
.fs-panel--01 .fs-panel__credit {
    color: var(--ed-paper-muted);
}

.fs-panel--01 .ed-link {
    color: var(--ed-paper-ink);
}

.fs-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin: 36px 0 0;
}

/* the (decorative) tile list dissolves into the grid so the link below can fill the last row */
.fs-mosaic__tiles {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-mosaic .ed-link {
    grid-column: span 3;
    align-self: center;
    margin: 0 0 0 8px;
    min-height: 44px;
    line-height: 1.3;
}

.fs-mosaic li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ed-paper-line);
}

.fs-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Study 02: one large photograph, full bleed: a single assignment */
.fs-panel--02 {
    display: flex;
    align-items: flex-end;
    min-height: min(100vh, 860px);
    min-height: min(100svh, 860px);
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.fs-panel__photo {
    position: absolute;
    inset: 0;
    margin: 0;
}

.fs-panel__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 24%;
}

.fs-panel__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 4, 5, .96) 0, rgba(5, 4, 5, .84) 40%, rgba(5, 4, 5, .08) 74%, rgba(5, 4, 5, .32) 100%);
}

.fs-panel--02 .fs-panel__inner {
    height: auto;
}

.fs-panel--02 .fs-panel__meta {
    color: var(--ed-sand);
}

.fs-panel--02 .fs-panel__credit {
    color: var(--ed-muted);
}

.fs-about {
    padding-block: clamp(56px, 8vw, 112px);
    background: var(--fs-dusk);
    color: var(--ed-bone);
}

.fs-about__grid {
    display: grid;
    gap: 28px;
}

.fs-about p {
    margin: 0;
    max-width: 32rem;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--ed-muted);
}

.fs-about .fs-deck {
    color: var(--ed-bone);
    font-size: clamp(1.9rem, 3.8vw, 3.2rem);
    line-height: 1.08;
    max-width: 24rem;
}

@media (min-width: 900px) {
    .fs-spread {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: min(100vh, 900px);
        min-height: min(100svh, 900px);
    }

    .fs-panel--02 {
        min-height: 0;
        align-items: flex-end;
    }

    .fs-panel--01 .fs-panel__inner {
        margin-left: auto;
    }

    .fs-mosaic {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .fs-mosaic .ed-link {
        grid-column: span 7;
    }

    .fs-about__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
        gap: clamp(40px, 7vw, 120px);
        align-items: end;
    }
}

/* ---------- Motion: none in A.1 ---------- */
@media (prefers-reduced-motion: reduce) {
    .fs-wall .fs-photo:nth-child(even) {
        transition: none;
    }
}


/* Six Worlds: editorial carousel. Scoped to the Cowboys case study. */
.fs-worlds { overflow: hidden; }
.fs-worlds__intro { max-width: 49rem; }
.fs-worlds__intro .ed-lead { max-width: 42rem; margin-top: 22px; }
.fs-worlds__quote { margin: clamp(32px,5vw,60px) 0 clamp(42px,6vw,76px); padding-left: clamp(18px,3vw,36px); border-left: 2px solid var(--ed-sand); }
.fs-worlds__quote blockquote { margin: 0; max-width: 42rem; font: italic 400 clamp(1.7rem,3.7vw,3.6rem)/1.13 var(--ed-serif); }
.fs-worlds__quote figcaption { margin-top: 20px; font: 500 .72rem/1.5 var(--ed-mono); letter-spacing: .09em; color: var(--ed-muted); }
.fs-worlds__rail { display: flex; gap: clamp(16px,2.4vw,32px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ed-gutter); overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px var(--ed-gutter) 32px; margin-inline: calc(-1 * var(--ed-gutter)); }
.fs-worlds__rail::-webkit-scrollbar { display: none; }
.fs-world { flex: 0 0 min(76vw, 300px); min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.fs-world__phone { position: relative; width: 100%; aspect-ratio: 9/18.9; overflow: hidden; border: 7px solid #343139; border-radius: 35px; background: #17151a; box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.16); }
.fs-world__phone::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 30%; height: 15px; border-radius: 999px; background: #0a090b; z-index: 2; pointer-events: none; }
.fs-world__phone video { display: block; width: 100%; height: 100%; object-fit: cover; background: #17151a; }
.fs-world__info { padding: 22px 4px 4px; }
.fs-world__number { display: block; margin-bottom: 10px; font: 500 .68rem/1.4 var(--ed-mono); letter-spacing: .16em; color: var(--ed-muted); }
.fs-world__info h3 { margin: 0; font: 400 clamp(1.8rem,2.7vw,2.6rem)/1.02 var(--ed-serif); }
.fs-world__info p { min-height: 3.9em; max-width: 19rem; margin: 12px 0 16px; font-size: .94rem; line-height: 1.55; color: var(--ed-muted); }
.fs-world__info a { color: var(--ed-bone); text-decoration: none; border-bottom: 1px solid var(--ed-muted); font: 500 .72rem/1.5 var(--ed-mono); letter-spacing: .04em; }
.fs-world__info a:hover { border-color: var(--ed-bone); }
.fs-worlds__controls { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 16px; }
.fs-worlds__count { font: 500 .73rem/1.5 var(--ed-mono); letter-spacing: .13em; color: var(--ed-muted); }
.fs-worlds__buttons { display: flex; gap: 10px; }
.fs-worlds__buttons button { width: 48px; height: 48px; border: 1px solid var(--ed-muted); border-radius: 50%; background: transparent; color: var(--ed-bone); font-size: 1.3rem; cursor: pointer; }
.fs-worlds__buttons button:disabled { opacity: .28; cursor: default; }
.fs-worlds__rail:focus-visible, .fs-worlds__buttons button:focus-visible { outline: 2px solid var(--ed-bone); outline-offset: 4px; }
@media (min-width: 720px) { .fs-world { flex-basis: min(29vw, 310px); } .fs-worlds__rail { scroll-padding-inline: var(--ed-gutter); } }
@media (prefers-reduced-motion: reduce) { .fs-worlds__rail { scroll-behavior: auto; } }


/* Six Worlds v2: borderless films, editorial posters */
.fs-world__phone { display:none; }
.fs-world__media { position:relative; display:block; width:100%; padding:0; aspect-ratio:9/18.9; border:0; border-radius:3px; overflow:hidden; background:#17151a; color:white; cursor:pointer; }
.fs-world__media video { display:block; width:100%; height:100%; object-fit:cover; }
.fs-world__media:focus-visible { outline:2px solid var(--ed-bone); outline-offset:4px; }
.fs-world__play { position:absolute; bottom:16px; left:16px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffffb8; background:#0009; font-size:14px; }
.fs-world__media[aria-pressed="true"] .fs-world__play { opacity:0; }
.fs-world__media[aria-pressed="true"]:hover .fs-world__play, .fs-world__media[aria-pressed="true"]:focus-visible .fs-world__play { opacity:1; }
.fs-world__info p { min-height:0; max-width:29rem; }


/* Immersive Worlds v3 — the live published Cowboys & Caftans experience. */
.fs-world__stage { position:relative; width:100%; aspect-ratio:9/18.9; background:#17151a; overflow:hidden; border-radius:3px; }
.fs-world__select { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; background:#17151a; color:#fff; z-index:1; }
.fs-world__select img { display:block; width:100%; height:100%; object-fit:cover; }
.fs-world__preview-label { position:absolute; bottom:14px; left:14px; padding:9px 12px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.5); font:600 10px/1.3 monospace; letter-spacing:.06em; text-transform:uppercase; }
.fs-world__select:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.fs-world__live { position:absolute; inset:0; z-index:2; pointer-events:none; }
.fs-world__live iframe { display:block; width:100%; height:100%; border:0; background:transparent; pointer-events:auto; }
.fs-world:not(.fs-world--live) .fs-world__live { display:none; }
.fs-world--live .fs-world__select { visibility:hidden; }
.fs-world--live .fs-world__stage { outline:2px solid #e9e2d5; outline-offset:2px; }
.fs-world__media { display:none !important; }

/* Pointer Worlds v4 — scoped commerce panel + real embedded selector previews. */
.fs-shop--cream { background: #e9dfcb; color: #211d19; padding-block: clamp(48px, 6vw, 88px); }
.fs-shop--cream .fs-label, .fs-shop--cream .ed-lead, .fs-shop--cream .fs-shop__links a { color: #51463b; }
.fs-shop--cream .fs-group__title { color: #211d19; }
.fs-shop--cream .ed-btn--solid { background: #211d19; color: #f5eee1; border-color: #211d19; }
.fs-shop--cream .fs-shop__links a { border-color: #877b6b; }
.fs-world__stage { position: relative; }
.fs-world__selector-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; z-index: 1; }
.fs-world--selector .fs-world__select { position: relative; z-index: 2; }
.fs-world--selector .fs-world__select img { opacity: 0; }
.fs-world--selector .fs-world__preview-label { position: relative; z-index: 3; }
.fs-world--live .fs-world__selector-frame { display: none; }

.fs-world--selector .fs-world__select { background: transparent; }