/**
 * FlowMediaKit - public surfaces.
 *
 * Built to the frames' slot tables (P0.4 report 7.1-7.3). The engine shipped
 * first and this is the drawn layer over it; every class here has a slot in
 * those tables rather than being invented at the keyboard.
 *
 * ⚠ Deliberately template-agnostic. Flow's sites run Cassiopeia derivatives and
 * this must not fight them: no resets, no element selectors, everything under
 * an fmk- prefix, and spacing in rem so a template's own scale carries through.
 */

:root {
    --fmk-gap: 1rem;
    --fmk-radius: 6px;
    --fmk-border: #dfe3e8;
    --fmk-muted: #5b6570;
    --fmk-ink: #1c2126;
    --fmk-bg-soft: #f6f7f9;
    --fmk-accent: #1a4f8a;
    --fmk-ok: #1e7a4a;
}

/* ---------------------------------------------------------------- gallery */

.fmk-gallery-head { margin-bottom: 1.5rem; }
.fmk-gallery-head__intro { color: var(--fmk-muted); max-width: 60ch; }

/* The views row: chips for the operator's published saved views, then the two
   facets that are true for every file today. Views are not a taxonomy - the
   operator decides what appears and in what order. */
.fmk-views {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid var(--fmk-border);
    border-bottom: 1px solid var(--fmk-border);
    margin-bottom: 1.25rem;
}

.fmk-views__chip {
    display: inline-block;
    padding: .3rem .75rem;
    border: 1px solid var(--fmk-border);
    border-radius: 999px;
    font-size: .875rem;
    text-decoration: none;
    color: var(--fmk-ink);
    background: #fff;
    white-space: nowrap;
}

.fmk-views__chip:hover { border-color: var(--fmk-accent); color: var(--fmk-accent); }
.fmk-views__chip.is-current { background: var(--fmk-accent); border-color: var(--fmk-accent); color: #fff; }
.fmk-views__facets { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.fmk-views__facets select { font-size: .875rem; padding: .25rem .5rem; }

.fmk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/*
 * Layout presets for entity pages (lock 4).
 *
 * ⚠ THESE EXIST BECAUSE THE PARAM DID NOT.
 *
 * `layout_preset` has been stored on saved views since the schema was written
 * and NOTHING has ever read it - no template, no view, no CSS. Shipping the
 * same param on entity menu items without these rules would have shipped a
 * control that looks like it works and does nothing, which is exactly the
 * defect 0.14.29 fixed on the picker beside it.
 *
 * ⚠ Declared BEFORE the responsive blocks, deliberately. Those set
 * `.fmk-grid` at equal specificity and later in the file, so a narrow viewport
 * still collapses every preset to its own column count rather than a preset
 * overriding the phone layout. `grid` needs no rule of its own - it IS the base.
 */
.fmk-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

/* The first tile leads, at twice the size. A "featured strip" with nothing
   featured would be indistinguishable from the plain grid. */
.fmk-grid--featured > .fmk-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Columns rather than grid: masonry means tiles of unequal height packing
   vertically, which CSS grid cannot do without fixed row tracks. */
.fmk-grid--masonry {
    display: block;
    columns: 3;
    column-gap: 1.25rem;
}

.fmk-grid--masonry > .fmk-card {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}

.fmk-card {
    border: 1px solid var(--fmk-border);
    border-radius: var(--fmk-radius);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* ⚠ 4:3 box with the image CONTAINED, not cropped. The frames are explicit:
   portraits must read. object-fit: cover would centre-crop a headshot, which on
   a media kit is somebody's face cut off. */

/*
 * The media link fills its box and adds nothing visually - the card already
 * frames the picture, and a second frame or a hover tint would read as a
 * button rather than as the photograph it is.
 */
.fmk-card__media-link { display: block; }
.fmk-card__media {
    aspect-ratio: 4 / 3;
    background: var(--fmk-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--fmk-border);
}


/*
 * ⚠ height: auto IS THE REQUIRED COMPANION TO THE width/height ATTRIBUTES, not
 * a tidy-up.
 *
 * Those attributes are what let a browser reserve the right space before the
 * bytes arrive - which is the whole point of adding them, and what keeps a grid
 * of cards from reflowing as each image lands. But an <img> carrying them under
 * `max-width: 100%` and no height rule scales its WIDTH down and keeps its
 * height at the attribute value: the exact squashing this was meant to prevent.
 * The attributes and this line ship together or neither does.
 */
.fmk-card__media img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.fmk-card__placeholder { color: var(--fmk-muted); font-size: .8125rem; padding: 1rem; text-align: center; }

/*
 * A video card's moving preview, inserted by site.js on hover and removed on
 * leave. It covers the poster rather than replacing it, so the still is still
 * painted underneath while the preview decodes - swapping the src would blank
 * the card for as long as the fetch took.
 *
 * The media box needs to be a positioning context for this, and it is the ONLY
 * reason position:relative is on it.
 */
.fmk-card__media { position: relative; }

.fmk-card__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--fmk-bg-soft);
}

/*
 * ⚠ The duration badge sits ON the media, so it must not be the thing a click
 * lands on - the whole picture is a link to the asset.
 */
.fmk-card__duration {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    z-index: 1;
    pointer-events: none;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .75rem;
    line-height: 1;
    padding: .25rem .4rem;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.fmk-card__body { padding: .875rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.fmk-card__title { font-weight: 600; line-height: 1.3; }
.fmk-card__title a { text-decoration: none; color: var(--fmk-ink); }
.fmk-card__title a:hover { color: var(--fmk-accent); text-decoration: underline; }
.fmk-card__facts { font-size: .8125rem; color: var(--fmk-muted); }

.fmk-card__credit { font-size: .8125rem; display: flex; gap: .5rem; align-items: baseline; }
.fmk-card__credit-text { color: var(--fmk-ink); }

/* A missing credit is stated quietly on a PUBLIC surface. The admin shows it in
   alert red because it is a rights problem an operator must fix; a visitor is
   not the person who can fix it, and shouting at them about it would publish an
   internal to-do. */
.fmk-card__credit--none { color: var(--fmk-muted); font-style: italic; }
.fmk-card__actions { margin-top: auto; display: flex; gap: .5rem; padding-top: .25rem; }

.fmk-btn {
    display: inline-block;
    padding: .4rem .75rem;
    border-radius: var(--fmk-radius);
    border: 1px solid var(--fmk-border);
    background: #fff;
    color: var(--fmk-ink);
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
}

.fmk-btn:hover { border-color: var(--fmk-accent); color: var(--fmk-accent); }
.fmk-btn--primary { background: var(--fmk-accent); border-color: var(--fmk-accent); color: #fff; }
.fmk-btn--primary:hover { color: #fff; opacity: .92; }
.fmk-btn--quiet { border-color: transparent; padding-left: .35rem; padding-right: .35rem; }
.fmk-btn[disabled] { opacity: .55; cursor: default; }

.fmk-foot {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--fmk-border);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.fmk-foot__text { color: var(--fmk-muted); }

/* ------------------------------------------------------------ asset page */

.fmk-asset { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 2rem; }
.fmk-asset__media { background: var(--fmk-bg-soft); border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); display: flex; align-items: center; justify-content: center; min-height: 18rem; }
.fmk-asset__media img { max-width: 100%; max-height: 32rem; height: auto; object-fit: contain; }

/*
 * The asset page gets the same hover preview as a card, through the same
 * site.js and the same .fmk-card__preview element - so the only thing needed
 * here is a positioning context for it to sit in.
 *
 * ⚠ AND AN EXPLICIT OVERRIDE, because `.fmk-asset__media img` (0,1,1) is MORE
 * SPECIFIC than `.fmk-card__preview` (0,1,0) and would otherwise impose its own
 * max-height on the overlay while the poster underneath used the container's
 * full height. The two would disagree by a few pixels and the preview would
 * appear to jump on hover.
 */
.fmk-asset__media { position: relative; }

.fmk-asset__media img.fmk-card__preview {
    max-height: none;
    height: 100%;
    width: 100%;
}
.fmk-asset__title { margin-top: 0; }
/*
 * ⚠ A DIV, NOT A P, AND THAT IS FORCED BY THE CONTENT.
 *
 * The description is editor output, so it arrives wrapped in its own <p>. A <p>
 * inside a <p> is invalid HTML: the browser silently CLOSES the outer one at
 * the inner tag and the remaining markup lands outside this class entirely -
 * so the styling would appear to work on a one-line description and fall apart
 * on a real one. The caption branch stays a <p>; it is plain text.
 */
.fmk-asset__desc { color: var(--fmk-muted); }
.fmk-asset__desc > :first-child { margin-top: 0; }
.fmk-asset__desc > :last-child { margin-bottom: 0; }
.fmk-asset__desc a { color: var(--fmk-accent); }

.fmk-permalink { margin-top: 1rem; }
.fmk-permalink__label { font-size: .8125rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.fmk-permalink__row { display: flex; gap: .5rem; }
.fmk-permalink__input { flex: 1 1 auto; font-size: .8125rem; padding: .4rem .5rem; border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); background: #fff; color: var(--fmk-ink); }
.fmk-permalink__note { font-size: .8125rem; color: var(--fmk-muted); margin: .4rem 0 0; }

/* The facts card in the D-P8 grammar: one row per fact, a check per row. */
.fmk-facts { border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); margin: 1.25rem 0; }
.fmk-facts__row { display: flex; gap: .625rem; padding: .625rem .875rem; border-bottom: 1px solid var(--fmk-border); align-items: baseline; }
.fmk-facts__row:last-child { border-bottom: 0; }
.fmk-facts__check { color: var(--fmk-ok); flex: 0 0 auto; font-weight: 700; }
.fmk-facts__label { flex: 0 0 7.5rem; color: var(--fmk-muted); font-size: .8125rem; }
.fmk-facts__value { flex: 1 1 auto; }
.fmk-facts__value a { color: var(--fmk-accent); }

.fmk-ladder { margin-top: 1.25rem; }
.fmk-ladder__primary { margin-bottom: .625rem; }
.fmk-ladder__sizes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ⚠ The original's ROW IS ALWAYS PRESENT. Public visitors see "Request", a user
   holding the download-originals right sees "Download". The state changes the
   LABEL, never the presence - hiding it would make the rule invisible to the
   people it applies to. */
.fmk-ladder__original { margin-top: .625rem; padding-top: .625rem; border-top: 1px dashed var(--fmk-border); }
.fmk-ladder__note { font-size: .8125rem; color: var(--fmk-muted); margin: .4rem 0 0; }

.fmk-related { margin-top: 2.5rem; }
.fmk-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- module */

/* ⚠ THE BLOCK IS A GUEST IN SOMEBODY ELSE'S PAGE.
   It sits in a template position beside content nobody here wrote, so it gets a
   container of its own and a single-column list rather than the gallery's grid:
   a three-column grid inside a 260px sidebar is the block's most likely home
   rendered as three slivers. It also means the block never sets a page-level
   style - everything below is scoped under .fmk-block. */
.fmk-block { margin: 0 0 1.25rem; }
.fmk-block__item { display: flex; gap: .625rem; align-items: flex-start; }
.fmk-block__item .fmk-card__media { flex: 0 0 84px; margin: 0; }
.fmk-block__item .fmk-card__body { padding: 0; }
.fmk-block__item .fmk-card__facts { margin: .15rem 0 .35rem; }
.fmk-block__link { font-weight: 600; }

/* Same wording rule as the gallery's: vague about WHY, because a visitor must
   not learn from the copy whether a restricted view exists. */
.fmk-block__unavailable { color: var(--fmk-muted); font-size: .875rem; margin: 0; }

.fmk-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.fmk-block__view-name { margin: 0; font-size: 1rem; }
.fmk-block__count { color: var(--fmk-muted); font-weight: 400; }
.fmk-block__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }

/* The first-day screen. Five of seven bases have no photos at launch, so this
   is the state most operators meet first - a dashed panel that says what is
   true and offers the request path, never a blank heading over nothing. */
.fmk-block__empty {
    border: 1px dashed var(--fmk-border);
    border-radius: var(--fmk-radius);
    padding: 1rem;
    background: var(--fmk-bg-soft);
}

.fmk-block__empty-title { font-weight: 600; margin: 0 0 .35rem; }
.fmk-block__empty-hint { color: var(--fmk-muted); margin: 0 0 .75rem; font-size: .875rem; }
.fmk-block__foot { margin-top: .875rem; }

/* ----------------------------------------------------------------- embed */

/* ⚠ THE EMBED IS INSIDE AN ARTICLE'S TYPOGRAPHY, not beside it.
   It inherits the article's font, measure and link colour by design - a media
   block that restyles the paragraph around it is the thing authors complain
   about. So this section sets structure and spacing and almost no colour. */
.fmk-embed { margin: 1.5rem 0; }
.fmk-embed__view-name { margin: 0 0 .5rem; font-size: 1.0625rem; }
.fmk-embed__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}
.fmk-embed__item { margin: 0; }
.fmk-embed__link { font-weight: 600; }

/* Same first-day screen as the block's, drawn the same way, because an author
   who sees one and then the other should not have to work out that they mean
   the same thing. */
.fmk-embed__empty {
    border: 1px dashed var(--fmk-border);
    border-radius: var(--fmk-radius);
    padding: .875rem;
    background: var(--fmk-bg-soft);
}
.fmk-embed__empty p { margin: 0 0 .25rem; font-size: .875rem; }
.fmk-embed__empty p:last-child { margin: 0; color: var(--fmk-muted); }

.fmk-copy-flash { color: var(--fmk-ok); font-size: .8125rem; margin-left: .35rem; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 900px) {
    .fmk-asset { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .fmk-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* Two columns at 390 so portraits stay readable, per 7.4. */
    .fmk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

    /* The views row scrolls sideways rather than wrapping into a wall. */
    .fmk-views { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fmk-views__facets { margin-left: .5rem; }

    .fmk-asset__media { border-left: 0; border-right: 0; border-radius: 0; }
    .fmk-facts__label { flex-basis: 6rem; }
}

/* Masonry sets `display: block`, so the responsive `grid-template-columns`
   rules above cannot reach it. It needs its own narrow-viewport rule or it
   would keep three columns on a phone. */
@media (max-width: 782px) {
    .fmk-grid--masonry { columns: 2; }
}

@media (max-width: 480px) {
    .fmk-grid--masonry { columns: 1; }
}

/* The editor-only note under an empty entity page. Deliberately quiet - it is
   an instruction to one person, not a banner for the page. */
.fmk-entity__editor-note {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid #d97706;
    background: rgba(217, 119, 6, .07);
    font-size: .9375rem;
}

/* ---- entity page regions (D16) ----------------------------------------
 *
 * Deliberately plain at increment 1. The variables exist so the dimensions
 * people actually reach for are reachable WITHOUT writing a selector - per D18
 * a custom property cannot lose on specificity, which is the failure a
 * non-technical customer hits first.
 */
:root {
    --fmk-region-gap: 2.5rem;
    --fmk-doclist-gap: .5rem;
}

.fmk-region {
    margin-top: var(--fmk-region-gap);
}

.fmk-region__title {
    font-size: 1.25rem;
    margin: 0 0 .75rem;
}

.fmk-doclist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fmk-doclist-gap);
}

.fmk-doclist__item {
    padding: .6rem .75rem;
    border: 1px solid var(--fmk-border);
    border-radius: var(--fmk-radius);
    background: var(--fmk-bg-soft);
}

.fmk-doclist__link {
    font-weight: 600;
    color: var(--fmk-accent);
}

.fmk-doclist__caption {
    display: block;
    color: var(--fmk-muted);
    font-size: .875rem;
}

/* ---- the media kit page (D19, Prism's frames) -------------------------
 *
 * D18: the three measurements the frames imply are exposed as variables, so a
 * customer changing the rail width does not have to write a selector - and a
 * custom property cannot lose on specificity, which is the failure a
 * non-technical operator hits first.
 */
:root {
    --fmk-rail-width: 320px;
    --fmk-head-media: 160px;
    --fmk-rail-gap: 40px;
    --fmk-accent: #bf383a;
}

.fmk-kit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fmk-rail-width);
    gap: var(--fmk-rail-gap);
    align-items: start;
}

.fmk-kit__grid--norail { grid-template-columns: minmax(0, 1fr); }

/*
 * THE HEAD - Prism frame A, James's ruling 2026-09-05.
 *
 * Media, name and descriptor in ONE horizontal box; About drops below at the
 * column's own measure. Four styles share this markup and differ by a class;
 * the fifth (`band`) needs the image above the grid and is not built.
 *
 * ⚠ EVERY SIZE IS A PIXEL VALUE, NEVER A PERCENTAGE, and that is a bug fix
 * rather than a taste. A percentage means one thing beside the contact rail and
 * another without it - the same head measured 420px wide with no rail and 288px
 * with one, so an operator filling in a phone number shrank their own headshot
 * by a third and had no way to connect the two. Fixed px is immune.
 */
.fmk-kit-head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 24px;
}

.fmk-kit-head__media { margin: 0; flex: 0 0 auto; }

/*
 * ⚠ ROUND FOR A PERSON, SQUARE FOR A BRAND, and the shape is not decoration.
 * A circle crops to its centre, which flatters a face and decapitates a
 * wordmark. The entity type picks, so nobody has to remember.
 *
 * `object-fit: cover` is what makes the circle work at all - without it a
 * non-square portrait distorts rather than crops.
 */
.fmk-kit-head--round .fmk-kit-head__media img {
    width: 208px;
    height: 208px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px var(--fmk-border);
}

.com-flowmediakit-entity--brand .fmk-kit-head--round .fmk-kit-head__media img {
    width: 160px;
    height: 160px;
    border-radius: var(--fmk-radius);
    object-fit: contain;
    box-shadow: none;
}

/* Byline: the same block at a signature size, for a kit that is mostly text. */
.fmk-kit-head--byline { gap: 18px; }

.fmk-kit-head--byline .fmk-kit-head__media img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.com-flowmediakit-entity--brand .fmk-kit-head--byline .fmk-kit-head__media img {
    border-radius: var(--fmk-radius);
    object-fit: contain;
}

.fmk-kit-head--byline .fmk-entity__name { font-size: 26px; }

/* Column: the shipped 160px treatment, kept so nobody loses the page they had. */
.fmk-kit-head--column { align-items: flex-start; gap: 24px; }

.fmk-kit-head--column .fmk-kit-head__media img {
    width: 160px;
    height: auto;
    border-radius: var(--fmk-radius);
    display: block;
}

/*
 * None: the name and descriptor alone.
 *
 * ⚠ THE FIGURE IS HIDDEN RATHER THAN OMITTED so that choosing this style does
 * not depend on the operator also clearing the hero - the picture stays
 * assigned and reappears the moment they choose another style.
 */
.fmk-kit-head--none .fmk-kit-head__media { display: none; }

/*
 * ⚠ NO MEDIA MEANS NO MEDIA BOX. With flex there is no phantom column to fall
 * into - the reason the old grid put the text in its 160px slot - but the text
 * still needs to fill the row rather than sit at its content width.
 */
.fmk-kit-head--nomedia .fmk-kit-head__text { flex: 1 1 auto; }

.fmk-kit-head__text { min-width: 0; }

.fmk-kit-head__descriptor {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--fmk-ink);
    margin: 4px 0 0;
    text-wrap: balance;
}

/* About, below the head, at a reading measure rather than the full width. */
.fmk-kit-head__about {
    max-width: 720px;
    margin-bottom: 28px;
}
/* ---- the band --------------------------------------------------------
 *
 * ⚠ TEXT TABS WITH AN UNDERLINE, NEVER PILLS. The gallery's saved-view chips
 * are round pills, and a reader who has seen those must never mistake a
 * SECTION for a FILTER. They differ in kind on purpose.
 */
.fmk-band__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    border-bottom: 1px solid var(--fmk-border);
    margin-bottom: 22px;
}

.fmk-band__tab {
    font-size: 15px;
    font-weight: 500;
    color: var(--fmk-ink);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
}

.fmk-band__tab:hover { color: var(--fmk-accent); }

/* Only once the script has made these actual tabs does the active one claim
 * to be selected - before that they are anchors and all panels are showing. */
.fmk-band.is-tabbed .fmk-band__tab.is-active {
    color: var(--fmk-accent);
    border-bottom-color: var(--fmk-accent);
}

.fmk-band__panel { margin-bottom: 28px; }
.fmk-band.is-tabbed .fmk-band__panel { margin-bottom: 0; }

.fmk-band__title { font-size: 22px; font-weight: 700; margin: 0 0 14px; }
.fmk-band__body { max-width: 720px; }
.fmk-band__body h3 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; }

/* ---- region heads ----------------------------------------------------- */

.fmk-region__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--fmk-accent);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.fmk-region__count { color: var(--fmk-muted); font-size: .875rem; margin: 0; }
.fmk-region__head .fmk-views__facets { margin-left: auto; }
.fmk-region__more { color: var(--fmk-muted); font-size: .875rem; margin-top: 12px; }

/* ---- the rail --------------------------------------------------------- */

.fmk-card {
    border: 1px solid var(--fmk-border);
    border-radius: var(--fmk-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.fmk-card__heading {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--fmk-accent);
}

.fmk-contact__name { font-size: 16px; font-weight: 700; margin: 10px 0 0; }
.fmk-contact__role { color: var(--fmk-muted); font-size: .875rem; margin: 2px 0 10px; }

.fmk-contact__fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.fmk-contact__fields dt { color: var(--fmk-muted); }
.fmk-contact__fields dd { margin: 0; word-break: break-word; }

/* The email is text, not a link (James's ruling) - so it must still LOOK
 * selectable, or a reader assumes it is decorative and hunts for a link. */
.fmk-contact__email { user-select: all; }

.fmk-contact__social { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 0 0; }

.fmk-pill {
    display: inline-block;
    padding: .2rem .6rem;
    border: 1px solid var(--fmk-border);
    border-radius: 1rem;
    font-size: .8125rem;
    text-decoration: none;
}

@media (max-width: 860px) {
    .fmk-kit__grid { grid-template-columns: minmax(0, 1fr); }
    /*
     * ⚠ THE HEAD WRAPS ON A PHONE rather than shrinking. At 390px a 208px
     * circle beside a name leaves the name about 140px wide, which wraps to
     * four words a line. Stacked, both get the full width.
     *
     * ⚠ AND THESE ARE FLEX RULES NOW. The block they replaced set
     * grid-template-columns, which stopped meaning anything the moment the
     * head became a flex row - dead declarations that still LOOKED like the
     * mobile layout was handled.
     */
    .fmk-kit-head { flex-wrap: wrap; gap: 18px; }

    .fmk-kit-head--round .fmk-kit-head__media img,
    .com-flowmediakit-entity--brand .fmk-kit-head--round .fmk-kit-head__media img {
        width: 132px;
        height: 132px;
    }
    .fmk-band__strip { gap: 14px; overflow-x: auto; flex-wrap: nowrap; }
}

/*
 * A document card (0.17.3). A PDF has no thumbnail and never will, so it says
 * what it is instead of borrowing the "no preview yet" wording that belongs to
 * an image still being processed. Sized like a placeholder rather than like a
 * picture: this box is the same media slot every other card uses.
 */
.fmk-card__doc { align-self: center; border: 1px solid var(--fmk-line, #ddd); border-radius: .25rem; color: var(--fmk-muted); font-size: .875rem; font-weight: 600; letter-spacing: .04em; margin: auto; padding: .5rem .75rem; }
.fmk-card__doc-extent { color: var(--fmk-muted); font-size: .75rem; padding: 0 0 .75rem; text-align: center; }

/*
 * The per-group count beside a section heading. Quiet on purpose - it is an
 * orientation aid on a page of 44 files, not a statistic.
 */
.fmk-recipient__count { color: var(--fmk-muted); font-size: .8125rem; font-weight: 400; margin-left: .5rem; }
.fmk-recipient__group + .fmk-recipient__group { margin-top: 2rem; }

/* ---------------------------------------------------------------------------
 * FMK-17 - the entity page's image-led masonry (0.19.0).
 *
 * Columns rather than grid, as the old masonry preset was: tiles of unequal
 * height packing vertically is what CSS columns do and grid cannot without
 * fixed row tracks. Each tile is the photograph; the title, credit and actions
 * sit over it and appear on hover or keyboard focus.
 *
 * ⚠ THE OVERLAY NEVER BLOCKS THE PICTURE. It is pointer-events:none and only the
 * actions take events back, so a click anywhere else on the tile still lands on
 * the picture's link to the asset page.
 *
 * ⚠ FOCUS REVEALS IT. :focus-within is the keyboard's :hover. A control that
 * appears only for a mouse is a control a keyboard user cannot see and a screen
 * magnifier user cannot find.
 *
 * ⚠ WHERE THERE IS NO HOVER (touch) THE ACTIONS ARE ALWAYS SHOWN, and the title
 * and credit step back to screen-reader-only so a phone gets pictures with a
 * button row rather than a wall of overlaid text.
 * ------------------------------------------------------------------------- */

.fmk-masonry {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 12px;
}

.fmk-mtile {
    break-inside: avoid;
    margin: 0 0 12px;
    position: relative;
    overflow: hidden;
    border-radius: var(--fmk-radius);
    background: var(--fmk-bg-soft);
}

.fmk-mtile__media { position: relative; }
.fmk-mtile__image { display: block; }
.fmk-mtile__image img { display: block; width: 100%; height: auto; }
.fmk-mtile__image--none { min-height: 120px; display: flex; align-items: center; justify-content: center; }

.fmk-mtile .fmk-card__duration { top: .5rem; bottom: auto; }

.fmk-mtile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
    padding: .75rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%);
    opacity: 0;
    transition: opacity .15s ease-in-out;
    pointer-events: none;
}

.fmk-mtile:hover .fmk-mtile__overlay,
.fmk-mtile:focus-within .fmk-mtile__overlay { opacity: 1; }

.fmk-mtile__title { margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.fmk-mtile__credit { margin: 0; font-size: .75rem; opacity: .9; }

.fmk-mtile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; pointer-events: auto; }

.fmk-mtile__act {
    display: inline-block;
    padding: .3rem .65rem;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .94);
    color: var(--fmk-ink);
    font-size: .8125rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.fmk-mtile__act:hover { background: #fff; text-decoration: underline; }
.fmk-mtile__act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--fmk-accent); }
.fmk-mtile__act--download { background: var(--fmk-accent); color: #fff; }
.fmk-mtile__act--download:hover { background: var(--fmk-accent); }

.fmk-mtile .fmk-copy-flash { color: #fff; margin-left: .1rem; }

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

@media (hover: none) {
    .fmk-mtile__overlay { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 45%); }

    .fmk-mtile__title,
    .fmk-mtile__credit {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fmk-mtile__overlay { transition: none; }
}

@media (max-width: 782px) {
    .fmk-masonry { columns: 2; column-gap: 8px; }
    .fmk-mtile { margin-bottom: 8px; }
    .fmk-mtile__act { padding: .25rem .5rem; font-size: .75rem; }
}

@media (max-width: 340px) {
    .fmk-masonry { columns: 1; }
}

.fmk-region__more-link { margin-left: .35rem; font-weight: 600; }

/* ---- FMK-10: the gallery's entity filter ------------------------------ */

.fmk-entityfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: .9375rem;
}

.fmk-entityfilter__clear { font-size: .875rem; }