/* =============================================================
   Pointer Commerce – Editorial homepage (Pass A)
   Loaded after styles.css, by index.html only.
   Everything is scoped to body.is-editorial or an .ed-* class, so the
   shared styles.css and the Produced with Pointer pages are untouched.
   The composition is static; the one animation (the opening, Pass B) is the
   last block of this file and is scoped to html.ed-cine.
   ============================================================= */

/* ---------- Fonts (self-hosted, OFL; see assets/fonts/LICENSE-*) ---------- */
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
body.is-editorial {
    --ed-ink: #050405;
    --ed-ink-2: #0d0b0c;
    --ed-bone: #F1E6D6;
    /* = --sand-bright in styles.css */
    --ed-sand: #E7DAC6;
    /* = --sand in styles.css */
    --ed-muted: rgba(231, 218, 198, .72);
    --ed-line: rgba(231, 218, 198, .18);
    --ed-paper: #F1E8DB;
    --ed-paper-ink: #171210;
    --ed-paper-muted: #5A5046;
    --ed-paper-line: rgba(23, 18, 16, .18);
    --ed-cobalt: #2850D8;
    /* pulled from the cobalt hat in the photography */
    --ed-amber: #D9962B;
    --ed-serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", Georgia, serif;
    --ed-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --ed-gutter: clamp(20px, 5vw, 64px);
    --ed-radius: 3px;
    background: var(--ed-ink);
    overflow-x: clip;
    /* nothing may push the page wider than the viewport */
}

body.is-editorial *,
body.is-editorial *::before,
body.is-editorial *::after {
    box-sizing: border-box;
}

/* anchor jumps clear the fixed header */
.ed-section,
.ed-closing,
#producer {
    scroll-margin-top: 56px;
}

.ed-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ed-wrap {
    width: min(1280px, 100% - var(--ed-gutter) * 2);
    margin-inline: auto;
}

/* ---------- Shared type ---------- */
.ed-kicker {
    margin: 0 0 18px;
    font: 500 .75rem/1.4 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

.ed-h2,
.ed-h3 {
    margin: 0;
    font-family: var(--ed-serif);
    font-weight: 400;
    letter-spacing: -.012em;
    text-wrap: balance;
}

.ed-h2 {
    font-size: clamp(2.5rem, 5.2vw, 4.6rem);
    line-height: 1.02;
}

.ed-h2--xl {
    font-size: clamp(2.7rem, 6.2vw, 5.8rem);
    line-height: .98;
}

.ed-h3 {
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    line-height: 1.1;
}

.ed-h3--lg {
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
}

.ed-h2 em,
.ed-h3 em,
.ed-hero h1 em {
    font-style: italic;
}

.ed-lead {
    margin: 22px 0 0;
    max-width: 36rem;
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    line-height: 1.55;
}

/* second paragraph of a two-paragraph intro (ladder, fieldwork) */
.ed-lead--tail {
    margin-top: 12px;
}

.ed-body {
    margin: 16px 0 0;
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ed-muted);
}

.ed-note {
    margin: clamp(40px, 6vw, 72px) 0 0;
    padding-top: 18px;
    max-width: 46rem;
    border-top: 1px solid var(--ed-line);
    font: 400 .78rem/1.6 var(--ed-mono);
    letter-spacing: .02em;
    color: var(--ed-muted);
}

.ed-link {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    margin-top: 22px;
    min-height: 44px;
    font: 500 .85rem/1 var(--ed-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ed-bone);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    align-self: flex-start;
}

.ed-link:hover {
    color: #fff;
}

button.ed-link {
    appearance: none;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
}

/* The three ways to become a customer, at the close. Links, not a pricing table. */
.ed-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 36px;
    margin-top: 26px;
}

/* Block, not inline-flex: when a label wraps on a phone the arrow must wrap with the
   text instead of floating against the right edge on its own line. */
.ed-paths .ed-link {
    display: block;
    margin-top: 0;
    min-height: 0;
    padding-block: 12px;
    line-height: 1.5;
}

body.is-editorial a:focus-visible,
body.is-editorial button:focus-visible,
body.is-editorial [tabindex]:focus-visible {
    outline: 2px solid var(--ed-bone);
    outline-offset: 3px;
}

.ed-section--paper a:focus-visible,
.ed-section--paper button:focus-visible {
    outline-color: var(--ed-cobalt);
}

/* ---------- Buttons ---------- */
.ed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.ed-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--ed-radius);
    font: 500 .85rem/1 var(--ed-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ed-btn--solid {
    background: var(--ed-bone);
    color: var(--ed-ink);
}

.ed-btn--solid:hover {
    background: #fff;
}

.ed-btn--ghost {
    background: transparent;
    color: var(--ed-bone);
    border-color: rgba(241, 230, 214, .45);
}

.ed-btn--ghost:hover {
    border-color: var(--ed-bone);
    background: rgba(241, 230, 214, .08);
}

.ed-btn--block {
    width: 100%;
}

/* ---------- Provenance tags ---------- */
.ed-tag {
    display: inline-block;
    padding: 3px 8px 2px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font: 500 .66rem/1.4 var(--ed-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ed-sand);
    /* labels such as "Produced with Pointer · Cowboys & Caftans" must be able to wrap in narrow captions */
    white-space: normal;
}

.ed-tag--paper {
    color: var(--ed-paper-muted);
}

.ed-tag--float {
    position: absolute;
    top: 10px;
    left: 10px;
    border-color: rgba(231, 218, 198, .45);
    background: rgba(5, 4, 5, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--ed-bone);
}

.ed-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
    font: 400 .72rem/1.5 var(--ed-mono);
    letter-spacing: .04em;
    color: var(--ed-muted);
}

.ed-credit--paper {
    color: var(--ed-paper-muted);
}

.ed-fig {
    margin: 0;
}

.ed-fig>img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ed-radius);
}

/* ---------- Sections ---------- */
.ed-section {
    padding-block: clamp(72px, 10vw, 148px);
}

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

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

.ed-section--paper .ed-kicker,
.ed-section--paper .ed-body,
.ed-section--paper .ed-note {
    color: var(--ed-paper-muted);
}

.ed-section--paper .ed-note {
    border-top-color: var(--ed-paper-line);
}

/* =============================================================
   1 · Opening
   ============================================================= */
.ed-hero {
    position: relative;
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.ed-hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* mobile-first: photograph on top, copy rises into its lower edge */
.ed-hero__photo {
    position: relative;
    margin: 0;
    height: min(53vh, 520px);
    height: min(53svh, 520px);
    min-height: 340px;
}

.ed-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    border-radius: 0;
}

.ed-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 4, 5, .78) 0, rgba(5, 4, 5, .42) 14%, rgba(5, 4, 5, 0) 32%, rgba(5, 4, 5, 0) 46%, var(--ed-ink) 100%);
    pointer-events: none;
}

.ed-hero__photo .ed-credit {
    position: absolute;
    right: var(--ed-gutter);
    bottom: 28px;
    z-index: 2;
    margin: 0;
    color: rgba(241, 230, 214, .8);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
    display: none;
}

.ed-hero__copy {
    position: relative;
    z-index: 1;
    width: min(1280px, 100% - var(--ed-gutter) * 2);
    display: flex;
    flex-direction: column;
    margin: -120px auto 0;
    padding-bottom: 36px;
}

/* The umbrella proposition: a compact pre-headline line, large and animated during the
   cinematic opening, at rest a small mono kicker above the headline (Pass B glides it there). */
.ed-question {
    margin: 0 0 22px;
    font: 400 .8rem/1.55 var(--ed-mono);
    letter-spacing: .02em;
    color: var(--ed-sand);
    max-width: 24rem;
}

.ed-question__line {
    display: block;
}

.ed-question__line--em em {
    font-style: italic;
    color: var(--ed-bone);
}

.ed-hero h1 {
    margin: 0;
    max-width: none;
    font: 400 clamp(2.5rem, 14vw, 4.2rem)/.95 var(--ed-serif);
    letter-spacing: -.02em;
    color: var(--ed-bone);
}

/* The commercial proposition, directly under the headline: display type, one step below h1. */
.ed-hero__line {
    margin: 20px 0 0;
    max-width: 22ch;
    font: 400 clamp(1.45rem, 6.2vw, 2rem)/1.12 var(--ed-serif);
    letter-spacing: -.012em;
    color: var(--ed-bone);
    text-wrap: balance;
}

.ed-hero__line em {
    font-style: italic;
    color: var(--ed-sand);
}

.ed-hero__sub {
    order: 5;
    margin: 26px 0 0;
    max-width: 33rem;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ed-muted);
}

/* on phones the buttons follow the headline directly (the paragraph sits below them), so they get the headline's breathing room */
.ed-hero .ed-actions {
    margin-top: 32px;
    gap: 10px;
}

.ed-hero .ed-actions .ed-btn {
    flex: 1 1 100%;
    min-height: 50px;
}

/* "contact sheet" under the opening: the same brand, many moments */
.ed-strip {
    position: relative;
    padding: 8px 0 clamp(40px, 5vw, 64px);
    overflow: hidden;
}

.ed-strip__label {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .7ch;
    margin: 0 0 18px var(--ed-gutter);
    font: 500 .72rem/1.6 var(--ed-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

/* Native horizontal swipe on phones (C.2): the frames overflowed .ed-strip's own
   clipped box with no way to reach them, so the composition read as 2-3 fixed
   photos. Scroll-snap, no library, no autoplay; see .fs-cover__panels for the
   same technique on the Cowboys & Caftans field study. */
.ed-strip__frames {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 38vw;
    gap: 10px;
    padding-left: var(--ed-gutter);
    padding-right: var(--ed-gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.ed-strip__frames::-webkit-scrollbar {
    display: none;
}

.ed-strip__frame {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--ed-radius);
    background: var(--ed-ink-2);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.ed-strip__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 560px) {
    .ed-hero h1 {
        font-size: clamp(3.4rem, 9vw, 5rem);
    }

    .ed-hero .ed-actions .ed-btn {
        flex: 0 0 auto;
    }

    .ed-strip__frames {
        grid-auto-columns: 22vw;
    }
}

@media (min-width: 720px) {
    .ed-hero__stage {
        min-height: min(max(100vh, 680px), 940px);
        min-height: min(max(100svh, 680px), 940px);
        justify-content: center;
    }

    .ed-hero__photo {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 54%;
        height: auto;
        min-height: 0;
    }

    .ed-hero__photo img {
        object-position: 50% 9%;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
        mask-image: linear-gradient(to right, transparent 0, #000 30%);
    }

    .ed-hero__photo::after {
        background: linear-gradient(to bottom, rgba(5, 4, 5, .72) 0, rgba(5, 4, 5, .3) 12%, rgba(5, 4, 5, 0) 24%, rgba(5, 4, 5, 0) 82%, rgba(5, 4, 5, .6) 100%);
    }

    .ed-hero__photo .ed-credit {
        display: flex;
    }

    .ed-hero__sub {
        order: 0;
    }

    .ed-hero__copy {
        display: block;
        margin: 0 auto;
        padding: 150px 46% 110px 0;
    }

    .ed-question {
        font-size: .92rem;
        max-width: none;
        margin-bottom: 30px;
        overflow-wrap: normal;
    }

    .ed-hero h1 {
        font-size: clamp(2.9rem, 6.1vw, 6.9rem);
    }

    .ed-hero__line {
        margin-top: 26px;
        max-width: 26ch;
        font-size: clamp(1.7rem, 2.6vw, 2.6rem);
    }

    .ed-hero__sub {
        margin-top: 26px;
        font-size: 1.04rem;
    }

    .ed-hero .ed-actions {
        margin-top: 24px;
    }

    .ed-strip__label {
        margin-left: max(var(--ed-gutter), calc((100% - 1280px) / 2));
    }

    .ed-strip__frames {
        grid-auto-columns: minmax(0, 1fr);
        padding: 0 0 36px;
        gap: 12px;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .ed-strip__frame:nth-child(even) {
        transform: translateY(36px);
    }
}

/* =============================================================
   2 · The commercial problem
   ============================================================= */
.ed-problem__grid {
    display: grid;
    gap: 48px;
}

.ed-problem__copy .ed-lead {
    font-family: var(--ed-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    line-height: 1.22;
    max-width: 30rem;
    margin-top: 34px;
}

.ed-problem__copy .ed-body {
    margin-top: 22px;
}

.ed-problem__photo {
    max-width: 440px;
}

@media (min-width: 720px) {
    .ed-problem__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: clamp(48px, 8vw, 128px);
        align-items: end;
    }

    .ed-problem__photo {
        max-width: none;
    }
}

/* =============================================================
   3 · The experience
   ============================================================= */
.ed-exp__head {
    max-width: 44rem;
}

.ed-exp__body {
    display: grid;
    gap: 56px;
    margin-top: clamp(40px, 6vw, 80px);
}

.ed-exp__photo {
    max-width: 520px;
}

.ed-steps {
    display: grid;
    gap: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Product screens are evidence, not decoration: stacked full-width above the
   copy at every width below the desktop stair (C.2), instead of squeezed to
   a 112px thumbnail beside the text. */
.ed-step {
    display: block;
}

.ed-step__num {
    display: block;
    margin: 0 0 14px;
    font: 500 .72rem/1 var(--ed-mono);
    letter-spacing: .16em;
    color: var(--ed-muted);
}

.ed-step__phone {
    position: relative;
    max-width: 240px;
    margin: 0 0 20px;
}

.ed-step__phone img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}

.ed-step__phone .ed-tag--float {
    top: 6px;
    left: 6px;
    padding: 2px 5px 1px;
    font-size: .56rem;
}

.ed-step__title {
    margin: 0;
    font: 400 1.7rem/1.08 var(--ed-serif);
    letter-spacing: -.01em;
}

.ed-step__text {
    margin: 10px 0 0;
    max-width: 30rem;
    font-size: .97rem;
    line-height: 1.6;
    color: var(--ed-muted);
}

@media (min-width: 720px) {
    .ed-exp__body {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(32px, 4.5vw, 72px);
        align-items: start;
    }

    .ed-exp__photo {
        max-width: none;
        position: sticky;
        top: 96px;
    }

    .ed-step__phone {
        max-width: 300px;
    }
}

@media (min-width: 1000px) {
    .ed-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(14px, 2vw, 28px);
        padding-top: 8px;
    }

    /* a descending stair: intention, direction, execution */
    .ed-step:nth-child(2) {
        margin-top: 56px;
    }

    .ed-step:nth-child(3) {
        margin-top: 112px;
    }

    .ed-step__phone {
        max-width: none;
        margin-bottom: 22px;
    }

    .ed-step__phone .ed-tag--float {
        top: 10px;
        left: 10px;
        padding: 3px 8px 2px;
        font-size: .62rem;
    }

    .ed-step__title {
        font-size: clamp(1.55rem, 2.1vw, 1.95rem);
    }

    .ed-step__text {
        font-size: .94rem;
    }
}

/* =============================================================
   4 · The product ladder
   ============================================================= */
.ed-products__head {
    max-width: 46rem;
}

.ed-ladder {
    display: grid;
    gap: 72px;
    margin-top: clamp(40px, 6vw, 80px);
}

.ed-prod {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ed-prod__media {
    min-width: 0;
}

.ed-prod__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ed-prod__visual {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ed-radius);
    background: var(--ed-paper-ink);
}

.ed-prod--solo .ed-prod__visual {
    aspect-ratio: 1 / .92;
}

.ed-prod--director .ed-prod__visual {
    aspect-ratio: 1 / 1.02;
}

.ed-prod--producer .ed-prod__visual {
    aspect-ratio: 1 / 1.1;
}

.ed-prod__visual img {
    display: block;
    object-fit: cover;
}

/* Solo: one frame, plus a provisional interface preview */
.ed-prod__img {
    width: 100%;
    height: 100%;
    object-position: 50% 24%;
}

.ed-prod__phone {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30%;
    height: auto;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}

/* Director: a coherent set */
.ed-prod__visual--set {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    background: var(--ed-paper);
}

.ed-set__a {
    grid-row: 1 / span 2;
}

.ed-prod__visual--set img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 2px;
}

.ed-set__a {
    object-position: 50% 20%;
}

.ed-set__b {
    object-position: 50% 24%;
}

.ed-set__c {
    object-position: 50% 30%;
}

/* Producer: a campaign board */
.ed-prod__visual--board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr 1fr;
    gap: 5px;
    background: var(--ed-paper);
}

.ed-board__a {
    grid-column: 1 / span 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-position: 50% 30%;
    border-radius: 2px;
}

.ed-board__b {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-position: 50% 30%;
    border-radius: 2px;
}

.ed-board__c {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    background: var(--ed-ink);
    border-radius: 2px;
}

.ed-board__c img {
    width: 62%;
    height: auto;
    max-height: 100%;
    margin-top: 10%;
    object-fit: contain;
    object-position: 50% 0;
}

.ed-prod__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
}

.ed-prod__scope {
    margin: 28px 0 0;
    font: 500 .72rem/1.4 var(--ed-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-paper-muted);
}

.ed-prod__name {
    margin: 8px 0 0;
    font: 400 clamp(2.4rem, 3.4vw, 3.2rem)/1 var(--ed-serif);
    letter-spacing: -.015em;
}

.ed-prod__q,
.ed-prod__cadence {
    margin: 14px 0 0;
    font: 400 1.28rem/1.25 var(--ed-serif);
    color: var(--ed-cobalt);
    text-wrap: balance;
}

.ed-prod__q {
    font-style: italic;
}

/* Producer's public promise: one agreed commercial objective per week. */
.ed-prod__cadence {
    margin-top: 16px;
}

.ed-prod__cadence em {
    font-style: italic;
}

.ed-prod__promise {
    margin: 16px 0 0;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 600;
}

.ed-prod__desc {
    margin: 12px 0 0;
    font-size: .97rem;
    line-height: 1.62;
    color: var(--ed-paper-muted);
}

.ed-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.ed-caps li {
    padding: 5px 10px 4px;
    border: 1px solid var(--ed-paper-line);
    border-radius: 999px;
    font: 400 .72rem/1.3 var(--ed-mono);
    letter-spacing: .02em;
    color: var(--ed-paper-ink);
}

/* How a Director engagement unfolds: four lines, not an onboarding checklist. */
.ed-arc {
    list-style: none;
    margin: 20px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ed-paper-line);
}

.ed-arc li {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font: 400 .84rem/1.5 var(--ed-mono);
    color: var(--ed-paper-muted);
}

.ed-arc li:first-child {
    margin-top: 0;
}

.ed-arc span {
    flex: 0 0 4.6rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .72rem;
    line-height: 1.75;
    color: var(--ed-paper-ink);
}

.ed-prod__foot {
    margin-top: auto;
    padding-top: 28px;
}

.ed-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding-top: 18px;
    border-top: 1px solid var(--ed-paper-line);
}

.ed-price__amount {
    font: 400 2.5rem/1 var(--ed-serif);
    letter-spacing: -.01em;
}

.ed-price__amount small {
    font: 400 .9rem/1 var(--ed-mono);
    letter-spacing: 0;
    color: var(--ed-paper-muted);
}

/* the "·" between a public status and its label, e.g. OPEN ALPHA · SHOPIFY MERCHANTS WELCOME.
   When the card is too narrow for the status and its label to share a line, the label drops underneath (as Solo's
   does) and the dot would be left dangling at the end of the first line, so it is hidden there. It stays in the text. */
.ed-price__sep {
    font: 400 .9rem/1 var(--ed-mono);
    color: var(--ed-paper-muted);
}

.ed-prod__foot {
    container-type: inline-size;
}

@container (max-width: 371px) {
    .ed-price__sep {
        display: none;
    }
}

.ed-price__trial {
    font: 500 .72rem/1.4 var(--ed-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ed-cobalt);
}

.ed-status {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 16px 0 18px;
    font: 400 .78rem/1.45 var(--ed-mono);
    letter-spacing: .02em;
    color: var(--ed-paper-ink);
}

.ed-prod__foot>.ed-status:first-child {
    padding-top: 18px;
    margin-top: 0;
    border-top: 1px solid var(--ed-paper-line);
    margin-bottom: 18px;
}

.ed-status::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-1px);
}

.ed-status--pending::before {
    background: var(--ed-amber);
}

.ed-status--dev::before {
    border: 1.5px solid var(--ed-paper-muted);
}

.ed-status--live::before {
    background: var(--ed-cobalt);
}

.ed-section--paper .ed-btn--solid {
    background: var(--ed-paper-ink);
    color: var(--ed-paper);
}

.ed-section--paper .ed-btn--solid:hover {
    background: var(--ed-cobalt);
}

.ed-note--paper {
    margin-top: clamp(48px, 7vw, 88px);
}

/* tablet: each product reads as a row, visual on the left */
@media (min-width: 720px) {
    .ed-ladder {
        gap: 64px;
    }

    .ed-prod {
        flex-direction: row;
        align-items: stretch;
        gap: clamp(24px, 4vw, 44px);
    }

    .ed-prod__media {
        flex: 0 0 42%;
    }

    .ed-prod__scope {
        margin-top: 0;
    }
}

/* desktop: three columns; one baseline, each visual rises a little higher (the ladder) */
@media (min-width: 1000px) {
    .ed-ladder {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(20px, 2.4vw, 36px);
    }

    .ed-prod {
        flex-direction: column;
        gap: 0;
    }

    .ed-prod__media {
        flex: none;
    }

    .ed-prod__stage {
        display: flex;
        align-items: flex-end;
        height: clamp(420px, 41vw, 600px);
    }

    .ed-prod--solo .ed-prod__visual {
        aspect-ratio: auto;
        height: 62%;
    }

    .ed-prod--director .ed-prod__visual {
        aspect-ratio: auto;
        height: 81%;
    }

    .ed-prod--producer .ed-prod__visual {
        aspect-ratio: auto;
        height: 100%;
    }

    .ed-prod__scope {
        margin-top: 28px;
    }

    /* Director's visual carries one caption tag, not two, so its row is one chip shorter than
       Solo's and Producer's. Reserving the two-chip height keeps all three product-name
       baselines level without touching the staggered photography. */
    .ed-prod__caption {
        min-height: 49.56px;
    }
}

/* =============================================================
   5 · Real commercial evidence
   ============================================================= */
.ed-evidence__head {
    max-width: 46rem;
}

.ed-legend {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: clamp(32px, 5vw, 56px) 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--ed-line);
}

.ed-legend li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ed-muted);
}

/* the legend's longest label may wrap rather than overflow its column */
.ed-legend .ed-tag {
    white-space: normal;
}

.ed-evidence__head .ed-link {
    margin-top: 26px;
}

.ed-gallery {
    display: grid;
    gap: 36px;
    margin-top: clamp(40px, 6vw, 72px);
}

.ed-gallery__b img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 62%;
}

/* Field Study 02 entry, directly under the Cowboys & Caftans photographs */
.ed-study {
    display: grid;
    gap: 22px;
    margin-top: clamp(36px, 5vw, 64px);
}

.ed-study__meta {
    margin: 14px 0 0;
    font: 500 .78rem/1.5 var(--ed-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

.ed-study__credit {
    margin: 0;
    max-width: 30rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ed-bone);
}

.ed-study__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ed-demos {
    margin-top: clamp(72px, 9vw, 132px);
}

.ed-demos__head .ed-body {
    margin-top: 10px;
}

.ed-demos__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    gap: 20px;
    list-style: none;
    margin: 32px calc(var(--ed-gutter) * -1) 0;
    padding: 4px var(--ed-gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ed-gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.ed-demo {
    scroll-snap-align: start;
    min-width: 0;
}

.ed-demo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5));
}

.ed-demo h4 {
    margin: 18px 0 0;
    font: 400 1.5rem/1.1 var(--ed-serif);
}

.ed-demo p {
    margin: 8px 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ed-muted);
}

.ed-journal {
    display: grid;
    gap: 36px;
    margin-top: clamp(72px, 9vw, 132px);
    padding-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--ed-line);
}

.ed-journal__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ed-journal__copy .ed-kicker {
    margin-bottom: 14px;
}

.ed-journal__frames {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ed-journal__frames li {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--ed-radius);
    background: var(--ed-ink-2);
}

.ed-journal__frames img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 720px) {
    .ed-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 40px;
    }

    .ed-gallery {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(20px, 2.4vw, 36px);
        align-items: end;
    }

    .ed-gallery__a {
        grid-column: 1 / span 5;
    }

    .ed-gallery__b {
        grid-column: 6 / span 7;
    }

    .ed-gallery__b img {
        aspect-ratio: 5 / 4;
        object-position: 50% 66%;
    }

    .ed-demos__rail {
        grid-auto-columns: 30vw;
    }

    .ed-study {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: end;
    }
}

@media (min-width: 1000px) {
    .ed-legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ed-demos__rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-columns: auto;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        gap: clamp(14px, 1.8vw, 28px);
    }

    .ed-journal {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: center;
    }

    .ed-journal__frames {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ed-journal__frames li {
        aspect-ratio: 2 / 3;
    }
}

/* =============================================================
   6 · Closing invitation
   ============================================================= */
.ed-closing {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(100vh, 880px);
    min-height: min(100svh, 880px);
    padding-block: clamp(72px, 10vw, 128px);
    overflow: hidden;
    background: var(--ed-ink);
    color: var(--ed-bone);
}

.ed-closing__photo {
    position: absolute;
    inset: 0;
    margin: 0;
}

.ed-closing__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 32% 24%;
}

.ed-closing__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 4, 5, .96) 0, rgba(5, 4, 5, .86) 34%, rgba(5, 4, 5, .12) 74%, rgba(5, 4, 5, .35) 100%);
    pointer-events: none;
}

.ed-closing__photo .ed-credit {
    position: absolute;
    left: var(--ed-gutter);
    top: 78px;
    margin: 0;
    z-index: 2;
    color: rgba(241, 230, 214, .8);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.ed-closing__copy {
    position: relative;
    z-index: 1;
}

.ed-closing .ed-lead {
    color: var(--ed-bone);
    max-width: 30rem;
}

@media (min-width: 720px) {
    .ed-closing {
        align-items: center;
    }

    .ed-closing__photo img {
        object-position: 30% 5%;
    }

    .ed-closing__photo::after {
        background: linear-gradient(to left, rgba(5, 4, 5, .92) 0, rgba(5, 4, 5, .8) 34%, rgba(5, 4, 5, 0) 66%), linear-gradient(to top, rgba(5, 4, 5, .55) 0, rgba(5, 4, 5, 0) 30%);
    }

    .ed-closing__photo .ed-credit {
        top: auto;
        bottom: 28px;
    }

    .ed-closing__copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 50%;
    }
}

/* =============================================================
   Existing shared chrome, corrected for this page only
   ============================================================= */
/* Mobile nav labels were wrapping onto three lines */
@media (max-width: 760px) {
    body.is-editorial .nav__mobile {
        gap: 10px;
        padding: 6px 12px;
    }

    body.is-editorial .nav__mobile-links {
        gap: 0;
    }

    body.is-editorial .nav__mobile-links a {
        height: 44px;
        padding: 0 8px;
        font-size: .7rem;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    body.is-editorial .nav__mobile-links a {
        padding: 0 6px;
        font-size: .66rem;
    }

    body.is-editorial .ed-nav-opt {
        display: none;
    }
}

/* Contact modal: inline status + disabled state used by the honest-send flow */
body.is-editorial .modal__status {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(217, 150, 43, .6);
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ed-bone);
}

body.is-editorial .modal__status[hidden] {
    display: none;
}

body.is-editorial .modal__error {
    margin-top: 2px;
    font-size: .8rem;
    line-height: 1.35;
    color: #F2A36B;
}

body.is-editorial .modal__form input[aria-invalid="true"],
body.is-editorial .modal__form select[aria-invalid="true"] {
    border-color: #F2A36B;
}

body.is-editorial .modal__actions .btn[disabled] {
    opacity: .6;
    cursor: progress;
}

/* =============================================================
   Cinematic opening v4: 8.5 seconds.
   Fixed question, three crossfading verbs, positioning statement,
   then a continuous curtain fade into the existing static hero.
   JS gates html.ed-cine; reduced-motion sees the static hero.
   ============================================================= */
.ed-hero__headline { position: relative; }
.ed-line { display: block; }
.ed-inst, .ed-inst__title { display: none; }
.ed-opening { display: none; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes ed-opening-question {
        0% { opacity: 0; transform: translateY(10px); }
        22% { opacity: 1; transform: translateY(0); }
        80% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-6px); }
    }
    @keyframes ed-opening-verb {
        0% { opacity: 0; transform: translateY(6px); }
        20% { opacity: 1; transform: translateY(0); }
        75% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes ed-opening-promise {
        0% { opacity: 0; transform: translateY(8px); }
        25% { opacity: 1; transform: translateY(0); }
        80% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes ed-opening-finish {
        0%, 88% { opacity: 1; visibility: visible; }
        99.99% { opacity: 0; visibility: visible; }
        100% { opacity: 0; visibility: hidden; }
    }

    html.ed-cine .ed-opening {
        display: grid;
        grid-template-rows: 1fr auto auto 1fr;
        justify-items: center;
        align-items: center;
        position: fixed;
        inset: 0;
        z-index: 1000;
        padding: 2rem;
        overflow: hidden;
        background: #050405;
        color: #f5f0e7;
        text-align: center;
        pointer-events: none;
        animation: ed-opening-finish 8500ms ease-in-out both;
    }

    html.ed-cine .ed-opening__question {
        grid-area: 2 / 1;
        align-self: end;
        opacity: 0;
        max-width: 90vw;
        font: 400 clamp(1.45rem, 4.2vw, 3.8rem)/1.15 var(--ed-serif);
        letter-spacing: -.015em;
        animation: ed-opening-question 4300ms ease-in-out 650ms both;
    }

    html.ed-cine .ed-opening__verb {
        grid-area: 3 / 1;
        align-self: start;
        opacity: 0;
        min-height: 1.4em;
        max-width: 90vw;
        margin-top: .2em;
        font: 400 clamp(1.7rem, 5vw, 4.5rem)/1.1 var(--ed-serif);
        letter-spacing: -.015em;
        animation: ed-opening-verb 850ms ease-in-out both;
    }

    html.ed-cine .ed-opening__verb--one {
        animation-delay: 1550ms;
    }
    html.ed-cine .ed-opening__verb--two {
        animation-delay: 2400ms;
    }
    html.ed-cine .ed-opening__verb--three {
        animation-delay: 3250ms;
    }

    html.ed-cine .ed-opening__promise {
        grid-area: 2 / 1 / 4 / 2;
        opacity: 0;
        max-width: min(90vw, 1000px);
        font: 400 clamp(1.65rem, 4.5vw, 4.1rem)/1.14 var(--ed-serif);
        letter-spacing: -.015em;
        animation: ed-opening-promise 2900ms ease-in-out 4850ms both;
    }

    html.ed-cine .ed-opening__promise span {
        display: block;
    }
    html.ed-cine .ed-opening__promise span + span {
        margin-top: .3em;
    }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ed-btn { transition: none; }
}

/* Hero responsive copy refinements — 2026-10-15 */
@media (min-width: 720px) and (max-width: 1199px) {
    .ed-question {
        max-width: 20rem;
    }
}

@media (min-width: 1200px) {
    .ed-hero h1 {
        font-size: clamp(2.9rem, 5.5vw, 6.2rem);
    }
}