/* Local cream / bronze study with a softly warmed, near-black site header. */
:root {
    --ff-warm-ground: #66513d;
    --ff-cream-ground: #e9e6de;
    --ff-section-bg: var(--ff-warm-ground);
    --ff-section-ink: #f6f0e5;
    --ff-section-copy: #e4d8c8;
    --ff-section-gold: #efd1a6;
    --ff-section-rule: #f6f0e538;
    --ff-section-card: #6e5741;
    --ff-section-selected: #594734;
    --ff-media-radius: clamp(16px, 1.7vw, 28px);
}
/* Keep the browser canvas neutral; the warm ground belongs to page content. */
html[data-design="screens"], html[data-design="palette"], html[data-design="two-surfaces"],
body.fft-site, body.ffp-site { background: #090b0d; }
:is(.fft-site, .ffp-site) > #main { background: var(--ff-warm-ground); }
.ffnav:not(.ffnav--home,.ffnav--intro), :is(.ffnav--home,.ffnav--intro):before {
    background: rgb(24 20 16 / 70%);
    backdrop-filter: blur(14px) saturate(0);
    -webkit-backdrop-filter: blur(14px) saturate(0);
}

/* Count content sections only: the immersive hero is outside the alternation. */
#main > section:nth-child(odd of section:not(.fft-story, .ffs-hero)),
.ffp-hero, .ffp-family:nth-child(even), .ffp-guide, .ffp-sources, .ffq-page {
    --ff-section-bg: var(--ff-cream-ground);
    --ff-section-ink: #151b1e;
    --ff-section-copy: #59554e;
    --ff-section-gold: #80603e;
    --ff-section-rule: #151b1e30;
    --ff-section-card: #f4f1eb;
    --ff-section-selected: #ded5c5;
    color-scheme: light;
}
#main > section:not(.fft-story, .ffs-hero),
.ffp-hero, .ffp-family, .ffp-guide, .ffp-sources, .ffp-quote-close, .ffq-page,
.ffs-footer {
    background: var(--ff-section-bg);
    color: var(--ff-section-ink);
    --ffs-gold: var(--ff-section-gold);
    --fft-gold: var(--ff-section-gold);
    --ffp-paper: var(--ff-section-ink);
    --ffp-gold: var(--ff-section-gold);
    --ffp-rule: var(--ff-section-rule);
    border-color: var(--ff-section-rule);
}
/* Extend the colour edge to edge while preserving the existing content rails. */
#main > section.ffs-wrap:not(.ffs-hero) {
    max-width: none;
    padding-inline: max(var(--ffs-rail), calc((100% - 1660px) / 2 + var(--ffs-rail)));
}
.ffp-hero, .ffp-family, .ffp-guide, .ffp-sources {
    max-width: none;
    padding-inline: max(var(--ffp-rail), calc((100% - 1700px) / 2 + var(--ffp-rail)));
}
.ffh-showcase { padding-bottom: clamp(38px, 4vw, 64px); }
.ffs-preview-note { background: #594734; color: #e4d8c8; }

.ffs-section p, .ffs-feature p, .ffs-section-head > p:last-child,
.ffs-card p, .ffs-quote-band p:not(.ffs-kicker), .ffh-showcase-heading > p:last-child,
.ffh-reference-note, .ffh-next p, .fft-credits, .ffs-palette-preview p,
.ffs-footer-top > span, .ffs-footer > p, .ffs-story .ffs-story-draft,
.ffs-story-copy > p, .ffs-story-signature span {
    color: var(--ff-section-copy);
}
.ffs-section .ffs-kicker, .ffs-feature .ffs-kicker, .ffs-palette-preview .ffs-kicker,
.ffs-palette-preview em, .ffs-story .ffs-story-lede, .ffs-story-copy .ffs-story-signature,
.ffh-next li > span, .ffs-footer-top > a:last-child span {
    color: var(--ff-section-gold);
}
.ffs-story-copy h3 { color: var(--ff-section-ink); }
.ffs-text-link, .ffs-palette-preview .ffs-text-link {
    color: var(--ff-section-ink) !important;
    border-color: var(--ff-section-gold);
}
.ffs-button { border-color: var(--ff-section-gold); }
.ffs-card, .ffh-next li { border-color: var(--ff-section-rule); }
#main > section:not(.fft-story, .ffs-hero) :is(a, button):focus-visible {
    outline-color: var(--ff-section-gold);
}

/* Photograph captions use cream shading rather than darkening the whole frame. */
.ffh-example, .ffs-related > a, .ffh-luke-film {
    --ff-section-ink: #30332f;
    --ff-section-copy: #44473f;
    --ff-section-gold: #785739;
    --ffs-gold: #785739;
    --fft-gold: #785739;
    color: var(--ff-section-ink);
}
.fft-site .ffh-example { color: var(--ff-section-ink); }
.ffs-process-film figcaption, .ffs-client-process figcaption {
    background: #594734;
    color: #e4d8c8;
}

/* Palette families alternate too; the actual sample colours are unchanged. */
body.ffp-site { --ffp-paper: #f6f0e5; --ffp-gold: #efd1a6; --ffp-rule: #f6f0e538; }
.ffp-jumps { background: #101112f5; color: #f0ede3; }
.ffp-sample { background: var(--ff-section-card); border-color: var(--ff-section-rule); }
.ffp-sample:has([aria-pressed="true"]) { background: var(--ff-section-selected); }
.ffp-hero-description, .ffp-hero-art figcaption, .ffp-intro-note,
.ffp-family-heading > p, .ffp-sample-text p, .ffp-family-note,
.ffp-guide li, .ffp-sources, .ffp-sources summary, .ffp-footer, .ffp-noscript,
.ffp-dialog-info, .ffp-dialog [data-shortlist-empty], .ffp-shortlist-item__meta,
.ffp-dialog [data-shortlist-persistence] { color: var(--ff-section-copy); }
.ffp-pick, .ffp-shortlist-item__remove, .ffp-dialog [data-shortlist-clear] {
    color: var(--ff-section-ink) !important;
}
.ffp-pick[aria-pressed="true"] { color: var(--ff-section-gold) !important; }
.ffp-dialog { background: #594734; }
.ffp-dialog-heading { background: #594734f7; }
.ffp-dialog textarea { background: var(--ff-warm-ground); }

/* A light, uncluttered enquiry screen followed by the bronze footer. */
.ffq-page {
    --ffq-cream: var(--ff-section-ink);
    --ffq-muted: var(--ff-section-copy);
    --ffq-gold: var(--ff-section-gold);
    --ffq-line: var(--ff-section-rule);
}
.ffq-swatches img { border-color: var(--ff-section-bg); }
.ffq-field label span, .ffq-page .ffq-preview-notice,
.ffq-page .ffq-field :is(input, textarea)::placeholder { color: var(--ff-section-copy); }
.ffq-page .ffq-field :is(input, textarea), .ffq-palette-item {
    border-color: var(--ff-section-rule);
}
.ffq-page .ffq-preview-button { border-color: var(--ff-section-gold); }

/* Clip the complete media frame so captions and image motion respect its corners. */
.ffh-example, .ffh-luke-film, .ffs-media, .ffs-related > a, .ffs-hero {
    border-radius: var(--ff-media-radius);
    overflow: hidden;
}
.ffs-hero-media { border-radius: inherit; overflow: hidden; }
.ffs-card > img, .ffs-media > img, .ffs-media > video, .ffh-luke-film > img,
.ffh-luke-film > video, .ffs-hero-media :is(img, video) {
    border-radius: var(--ff-media-radius);
}
.ffp-sample { border-radius: 18px; }
.ffp-sample-image { border-radius: 12px; }
.ffp-shortlist-item__image { border-radius: 10px; }

/* Natural photo and film colours. Never filter supplier colour samples. */
.ffs-site .ffs-hero-media :is(img, video),
.ffs-site .ffs-hero-luke .ffs-hero-media :is(img, video),
.ffs-media :is(img, video), .ffs-related > a > img,
.ffh-example img, .ffh-luke-film :is(img, video) { filter: none; }

/* The upper film stays clear; a warm paper fade supports the lower headline. */
.ffs-site .ffs-hero:after {
    background: linear-gradient(0deg, #faf8f2fa 0%, #faf8f2ed 23%,
        #faf8f2c4 40%, #faf8f25c 57%, #faf8f20a 76%);
}
.ffs-site .ffs-hero h1 { color: #30332f; }
.ffs-site .ffs-hero-copy > p:not(.ffs-kicker) { color: #44473f; }
.ffs-site .ffs-hero-copy .ffs-kicker { color: #64492f; }
.ffs-site .ffs-hero h1 em { color: #785739; }

/* Keep card photographs clear above their cream caption area. */
.ffh-example:after, .ffs-related > a:after {
    background: linear-gradient(0deg, #faf8f2fc 0%, #faf8f2eb 24%,
        #faf8f299 42%, #faf8f200 66%);
}
.ffh-example-solid:before { background: none; }
.ffh-example-copy strong, .ffs-related h3 { color: var(--ff-section-ink); }
.ffh-example-copy > span:not(.ffh-example-link),
.ffs-related p { color: var(--ff-section-copy); }
.ffh-example-link { border-color: #78573970; }
.ffh-example-link > span, .ffs-related .ffs-kicker,
.ffs-related > a > span > span { color: #785739; }
.ffh-example-number {
    width: fit-content; padding: 8px 12px; border-radius: 20px;
    color: #44473f; background: #faf8f2ed;
}

/* Compact captions and playback controls no longer put black panels on media. */
.ffs-media figcaption,
.ffs-site .ffs-film-credit, .ffs-site .ffs-hero-media figcaption {
    background: #faf8f2ed; color: #44473f;
}
.ffh-luke-film figcaption {
    background: linear-gradient(0deg, #faf8f2f5, #faf8f2d9 58%, transparent);
    color: #30332f;
}
.ffh-luke-film figcaption span { color: #44473f; }
.ffs-film-toggle {
    background: #faf8f2ed !important; color: #30332f !important;
    border-color: #51453540 !important;
}
.ffs-film-toggle:hover { background: #faf8f2 !important; }
.ffs-film-toggle:focus-visible { outline: 2px solid #785739; outline-offset: 4px; }
.ffh-luke-client:after {
    content: ""; position: absolute; inset: 0; background: #faf8f208;
    pointer-events: none;
}
.ffh-luke-client figcaption { z-index: 1; }

/* A restrained champagne warmth for Luke's supplied monochrome film and poster. */
.ffs-site .ffs-hero-luke .ffs-hero-media :is(img,video){filter:sepia(.28) saturate(.8) brightness(1.025)}