/* ── Public portal (issue #284, /p/{slug}) ──────────────────────────
   Self-contained: portal pages carry no app chrome and no app styles.
   Every themed value comes through the token variables the chrome partial
   compiles (--p-brand, --p-radius, --p-gap, --p-font) - the stylesheet
   never hardcodes a brand. Light + dark, zero-CLS by construction: media
   boxes hold their aspect before bytes arrive. Buttons are ink pills. */

:root {
    color-scheme: light dark;
    --p-bg: #ffffff;
    --p-surface: #f5f5f7;
    --p-surface-2: #e8e8ed;
    --p-text: #1d1d1f;
    --p-text-muted: #6e6e73;
    --p-border: rgba(0, 0, 0, 0.08);
    --p-border-strong: rgba(0, 0, 0, 0.18);
    --p-ink: #1d1d1f;
    --p-ink-text: #ffffff;
    --p-shell: 1240px;
    --p-pad: 32px;
    --p-lift: 0 14px 36px rgba(0, 0, 0, 0.12);
    --p-veil: rgba(255, 255, 255, 0.72);
    /* The UI voice is ALWAYS the system sans - the theme's typeface
       (--p-font) speaks only through display surfaces (titles, the brand
       mark, prose), the editorial split every premium publication makes.
       Controls set in a serif read as a costume, not a design. */
    --p-font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* Dark paint keys on the ATTRIBUTE, never on prefers-color-scheme - the
   platform theme contract, and the same shape the consultation portal
   already uses. An anonymous portal visitor has no saved choice, so
   _PortalChrome stamps html[data-theme="dark"] from the device preference
   synchronously before <body> parses; a portal opened inside the app then
   follows the app's explicit Light/Dark instead of the browser's. */
html[data-theme="dark"] {
    --p-bg: #000000;
    --p-surface: #161617;
    --p-surface-2: #232326;
    --p-text: #f5f5f7;
    --p-text-muted: #a1a1a6;
    --p-border: rgba(255, 255, 255, 0.12);
    --p-border-strong: rgba(255, 255, 255, 0.26);
    --p-ink: #f5f5f7;
    --p-ink-text: #1d1d1f;
    --p-lift: 0 14px 36px rgba(0, 0, 0, 0.6);
    --p-veil: rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font-ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Display surfaces carry the theme's typeface. */
.p-hero h1, .p-header-brand, .p-resource-facts h1, .p-cart h1,
.p-access-brand, .p-paused h1, .p-prose {
    font-family: var(--p-font);
}

a, button, input, summary { -webkit-tap-highlight-color: transparent; }

/* The platform tooltip bubble (bf-tooltip.css) reads the app's two core
   tokens; the portal defines only --p-*, so alias them here - the bubble
   is body-mounted and inherits these. Same inverted-surface recipe. */
.p-body { --text: var(--p-text); --bg: var(--p-bg); }

:is(a, button, summary):focus-visible {
    outline: 2px solid var(--p-brand);
    outline-offset: 3px;
}

/* Controls never wear the text cursor: a label is a verb, not editable
   text - pointer on everything pressable, and no accidental I-beam or
   drag-selection across a button's caption. Quiet info readouts (page
   position, counters) keep the arrow. */
.p-btn, summary.p-btn, .p-viewer-btn, .p-viewer-zoom, .p-card-quick-btn,
.p-walk-btn, .p-search-go, .p-search-clear, .p-cart-link, .p-locale,
.p-back, .p-lightbox-close, .p-lightbox-nav, .p-lightbox-info,
.p-dlmenu-row, .p-access-go, .p-access-resend {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.p-viewer-pages, .p-lightbox-counter, .p-walk-pos, .p-card-glyph-label {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ── Draft-preview honesty ribbon (members only) ── */

.p-preview-ribbon {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--p-ink-text);
    background: var(--p-ink);
}

/* ── Header: one frosted bar, hairline below, brand left ── */

.p-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--p-bg);
    border-bottom: 1px solid var(--p-border);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .p-header {
        background: var(--p-veil);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

.p-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: var(--p-shell);
    margin: 0 auto;
    min-height: 56px;
    padding: 0 var(--p-pad);
}

/* Identity + the customer's own navigation, one cluster. */
.p-header-left {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.p-header-brand {
    flex: none;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.014em;
    color: var(--p-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s ease;
}

.p-header-brand:hover { opacity: 0.72; }

/* Utilities, one cluster: selection chip, language menu, account. */
.p-header-utils {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* ── The header menus (#326): ONE popover grammar for language and
   account - a quiet disclosure pill, a floating card underneath. ── */

.p-menu { position: relative; }

.p-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px 6px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--p-text);
    border: 1px solid transparent;
    border-radius: 980px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-menu-btn::-webkit-details-marker { display: none; }
.p-menu-btn::marker { content: ""; }
.p-menu-btn:hover, .p-menu[open] > .p-menu-btn { background: var(--p-surface); }

.p-menu-glyph { width: 15px; height: 15px; flex: none; color: var(--p-text-muted); }

.p-menu-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.p-menu-chev {
    width: 11px;
    height: 11px;
    flex: none;
    color: var(--p-text-muted);
    transition: transform 0.15s ease;
}

.p-menu[open] > .p-menu-btn .p-menu-chev { transform: rotate(180deg); }

.p-menu-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 40;
    min-width: 200px;
    padding: 6px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 10px;
    box-shadow: var(--p-lift);
}

.p-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--p-text);
    text-align: start;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.12s ease;
}

.p-menu-item:hover { background: var(--p-surface); }
.p-menu-item.is-current { font-weight: 650; }
.p-menu-check { width: 14px; height: 14px; flex: none; visibility: hidden; }
.p-menu-item.is-current .p-menu-check { visibility: visible; }
.p-menu-out { width: 14px; height: 14px; flex: none; color: var(--p-text-muted); }

/* The signed-in facts atop the account menu: who, and as which address. */
.p-menu-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 9px;
    min-width: 0;
}

.p-menu-id strong { font-size: 13px; font-weight: 650; letter-spacing: -0.006em; }
.p-menu-id span {
    font-size: 12px;
    color: var(--p-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-menu-sep { height: 1px; margin: 2px 4px 6px; background: var(--p-border); }
.p-menu-form { display: block; }

/* The guest-selection chip: quiet pill, count included by the caller. */
.p-cart-link {
    flex: none;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--p-text);
    background: var(--p-surface);
    border-radius: 980px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.p-cart-link:hover { background: var(--p-surface-2); }

/* ── The account entry point (#326): one hairline pill while logged out;
   the identity MENU (shared .p-menu grammar) once signed in. ── */

.p-account-login {
    flex: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--p-text);
    border: 1px solid var(--p-border-strong);
    border-radius: 980px;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-account-login:hover { background: var(--p-surface); }

@media (max-width: 640px) {
    /* The marks keep their seats; the words yield first (the menus still
       state them in full). */
    .p-menu-label { display: none; }
    .p-menu-btn { padding: 6px 9px; }
}

/* ── Main + hero ── */

.p-main {
    max-width: var(--p-shell);
    margin: 0 auto;
    padding: 0 var(--p-pad) 96px;
}

.p-hero { padding: 64px 0 8px; max-width: 820px; }

.p-hero h1 {
    margin: 0;
    font-size: clamp(34px, 4.8vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.06;
    text-wrap: balance;
}

.p-hero-sub {
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.45;
    letter-spacing: -0.012em;
    color: var(--p-text-muted);
    max-width: 56ch;
    text-wrap: pretty;
}

/* A result state: the visitor asked a question - the hero folds to a
   compact header row so the answers sit above the fold. */
.p-hero-compact { padding: 28px 0 4px; }
.p-hero-compact h1 { font-size: clamp(22px, 2.6vw, 28px); }
.p-hero-compact .p-search { margin-top: 16px; }

/* ── Search: one capsule - magnifier, borderless field, ink pill inside ── */

.p-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 32px 0 4px;
    padding: 5px 5px 5px 46px;
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: 980px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.p-search:focus-within {
    background: var(--p-bg);
    border-color: var(--p-border-strong);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-brand) 10%, transparent);
}

.p-search-icon {
    position: absolute;
    inset-inline-start: 18px;
    top: 50%;
    translate: 0 -50%;
    width: 17px;
    height: 17px;
    color: var(--p-text-muted);
    pointer-events: none;
}

.p-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--p-text);
    outline: none;
}

/* One clear affordance only - ours. */
.p-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.p-search-clear {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--p-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.p-search-clear:hover { background: var(--p-surface-2); color: var(--p-text); }
.p-search-clear svg { width: 13px; height: 13px; }

.p-search-go { flex: none; padding: 9px 18px; font-size: 14px; position: relative; }

/* ── An asked search, waiting: the capsule says so at the press ──
   The pill keeps its size: its word steps aside for a ring turning in
   the word's own colour, and one light travels round the capsule's edge.
   Only a wait that lasts gets words - ONE line under the capsule, on its
   own plate, laid over the page (never pushing it), said again past 30 s. */
.p-search-go-label { transition: opacity 0.15s ease; }
.p-search-go-spin {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.p-search.is-searching .p-search-go { pointer-events: none; }
.p-search.is-searching .p-search-go-label { opacity: 0; }
.p-search.is-searching .p-search-go-spin { opacity: 1; animation: p-search-spin 0.8s linear infinite; }
.p-search.is-searching .p-search-clear { visibility: hidden; }
@keyframes p-search-spin { to { transform: rotate(360deg); } }

@property --p-search-sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.p-search::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--p-search-sweep),
        transparent 0deg 250deg,
        color-mix(in srgb, var(--p-brand) 70%, transparent) 320deg,
        var(--p-brand) 350deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.p-search.is-searching::after { opacity: 1; animation: p-search-sweep 1.6s linear infinite; }
@keyframes p-search-sweep { to { --p-search-sweep: 360deg; } }
.p-hero.p-hero-immersive .p-search:not(:focus-within)::after {
    background: conic-gradient(from var(--p-search-sweep),
        transparent 0deg 250deg, rgba(255, 255, 255, 0.55) 320deg, #fff 350deg, transparent 360deg);
}

.p-search-status {
    position: absolute;
    inset-inline-start: 18px;
    top: calc(100% + 10px);
    z-index: 2;
    max-width: calc(100% - 36px);
    margin: 0;
    padding: 6px 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.4;
    color: var(--p-text-muted);
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 980px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    animation: p-search-status-in 0.2s ease both;
}
.p-search-status[hidden] { display: none; }
@keyframes p-search-status-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .p-search.is-searching::after { animation: none; --p-search-sweep: 300deg; }
    .p-search.is-searching .p-search-go-spin { animation-duration: 1.6s; }
    .p-search-status { animation: none; }
}

/* ── Buttons: ink pills, always ── */

.p-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--p-ink-text);
    background: var(--p-ink);
    border: 1px solid transparent;
    border-radius: 980px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.p-btn:hover { background: color-mix(in srgb, var(--p-ink) 85%, var(--p-bg)); }
.p-btn:active { background: color-mix(in srgb, var(--p-ink) 76%, var(--p-bg)); }

.p-btn-quiet {
    color: var(--p-text);
    background: var(--p-surface);
}

.p-btn-quiet:hover { background: var(--p-surface-2); }
.p-btn-quiet:active { background: color-mix(in srgb, var(--p-surface-2) 80%, var(--p-text) 6%); }

/* ── Grid ── */

.p-grid-section { padding-top: calc(var(--p-gap) * 0.8); }

.p-results-line, .p-empty {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--p-text-muted);
}

.p-empty { padding: 72px 0; text-align: center; font-size: 15px; }

.p-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: calc(var(--p-gap) * 1.7) var(--p-gap);
    padding-top: calc(var(--p-gap) * 1.4);
}

.p-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--p-text);
    min-width: 0;
}

/* The stretched cover IS the card's one link; quick actions float above
   it. Everything else under the cover stays calm, plain content. */
.p-card-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--p-radius);
}

/* The quick actions' stacking home: the media's view-transition-name
   makes the media element a stacking context, which would trap the
   buttons' z-index under the cover - as the media's SIBLING inside this
   plain wrapper they compete in the card's own context and win. */
.p-card-visual { position: relative; display: block; }

.p-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--p-radius);
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

.p-card-media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.35s ease;
}

/* portal.js marks a still-travelling image; its arrival fades it in over
   the shimmer. Scripts off, nothing is ever hidden. */
.p-card-media img.is-pending { opacity: 0; }

/* The shimmer holds a thumbnailable frame while its tile derives or its
   bytes travel - a quiet moving sheen on the panel surface. */
.p-card-shimmer { position: absolute; inset: 0; overflow: hidden; }
.p-card-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--p-text) 6%, transparent), transparent);
    animation: p-shimmer 1.8s ease-in-out infinite;
}

@keyframes p-shimmer { to { transform: translateX(100%); } }

/* Quick actions: the two most common verbs, revealed on hover (always at
   hand on coarse pointers), floating over the media's bottom corner -
   never over the name. */
.p-card-quick {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    z-index: 3;
    display: inline-flex;
    gap: 6px;
    opacity: 0;
    translate: 0 4px;
    transition: opacity 0.18s ease, translate 0.18s ease;
    pointer-events: none;
}

.p-card:hover .p-card-quick,
.p-card:focus-within .p-card-quick {
    opacity: 1;
    translate: none;
    pointer-events: auto;
}

@media (hover: none) {
    .p-card-quick { opacity: 1; translate: none; pointer-events: auto; }
}

.p-card-quick-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.6);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    color: rgba(255, 255, 255, 0.94);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.p-card-quick-btn:hover { background: rgba(18, 18, 20, 0.82); }
.p-card-quick-btn svg { width: 15px; height: 15px; }
.p-card-quick-btn .p-quick-check { display: none; }
.p-card-quick-btn.is-added .p-quick-plus { display: none; }
.p-card-quick-btn.is-added .p-quick-check { display: block; }
.p-card-quick-btn.is-added { background: rgba(18, 18, 20, 0.85); cursor: default; }

/* The grid's entrance: each card rises briefly into place, front rows
   first - one shared curve, gone entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .p-grid .p-card {
        animation: p-card-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
        animation-delay: calc(min(var(--i, 0), 10) * 24ms);
    }
}

@keyframes p-card-rise {
    from { opacity: 0; transform: translateY(10px); }
}

.p-card:hover .p-card-media {
    border-color: var(--p-border-strong);
    box-shadow: var(--p-lift);
}

.p-card:hover .p-card-media img { transform: scale(1.04); }

.p-card-glyph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.p-card-glyph svg { width: 36px; height: 36px; }
.p-resource-media .p-card-glyph svg { width: 48px; height: 48px; }

.p-card-glyph-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-text-muted);
}

.p-card-name {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The #147 list format: on-card notice values, one quiet ellipsized line
   between the name and the size caption. */
.p-card-caption {
    margin-top: 2px;
    font-size: 13px;
    color: var(--p-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-card-meta {
    margin-top: 3px;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--p-text-muted);
}

/* The way forward: "Show N more" (fetch-appended by portal.js, a real link
   scriptless) and the position cue beside it. */
.p-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: calc(var(--p-gap) * 2) 0 0;
}
.p-more .p-btn.is-busy { pointer-events: none; opacity: 0.7; }

/* What the meaning alone found (issue #675): its own grid under ONE quiet
   heading - the count line's voice with the wave glyph, set apart by air,
   never by a rule. Alone (no word match) it follows the "no results" line. */
.p-near { margin-top: calc(var(--p-gap) * 3); }
.p-near.is-alone { margin-top: 4px; }
.p-near-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 34px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--p-text-muted);
}
.p-near-glyph { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.p-near > .p-grid { padding-top: calc(var(--p-gap) * 0.9); }

/* ── The action row: download, its ready definitions, the selection verb -
   pills on one wrapping line, one rhythm (issues #164/#150). A terms
   details rides the same row; opening it takes the full column and the
   neighbors wrap under. ── */
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.p-actions > .p-terms[open] { width: 100%; }
.p-download-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.p-cart-add { display: inline-flex; }

/* ── Per-download terms (P4b): the click-through gate ── */
.p-terms > summary { list-style: none; display: inline-flex; cursor: pointer; }
.p-terms > summary::-webkit-details-marker { display: none; }
.p-terms-body {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    max-width: 62ch;
}
.p-terms-text { font-size: 13px; line-height: 1.55; color: var(--p-text); }
.p-terms-text p { margin: 0 0 8px; }
.p-terms-hint { margin: 10px 0 14px; font-size: 12px; color: var(--p-text-muted); }
.p-cart-terms { margin-top: 18px; }

/* ── The guest selection (issues #150/#152) ── */
.p-cart h1 {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.022em;
    margin: 14px 0 24px;
}
/* The selection (redesign 2026-09-16): a head that states the set's facts
   before any click - how many, how heavy - with the verbs beside it, then
   rows anchored by a thumbnail plate: name, glyph + format · size, the
   identifier chip, the remove verb. Never a text-only row. */
.p-cart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 20px;
    margin: 4px 0 20px;
}
.p-cart-title { min-width: 0; }
.p-cart-title h1 { margin: 0; }
.p-cart-title .p-metaline { margin-top: 8px; }
.p-cart-title .p-metaline[hidden] { display: none; }
.p-cart-actions { margin-top: 0; }
.p-cart-list {
    display: flex;
    flex-direction: column;
    max-width: 860px;
    border-top: 1px solid var(--p-border);
    border-bottom: 1px solid var(--p-border);
}
.p-cart-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    transition: opacity 0.18s ease;
}
.p-cart-row + .p-cart-row { border-top: 1px solid var(--p-border); }
.p-cart-row.is-leaving { opacity: 0; }
.p-cart-plate {
    position: relative;
    display: block;
    width: 72px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    background: var(--p-surface);
}
.p-cart-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-cart-plate .p-card-glyph svg { width: 24px; height: 24px; }
.p-cart-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-cart-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-cart-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-cart-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--p-text-muted); }
.p-cart-meta-glyph { display: inline-flex; width: 14px; height: 14px; flex: none; }
.p-cart-meta-glyph svg { width: 14px; height: 14px; }
.p-cart-remove, .p-cart-clear, .p-cart-download, .p-cart-addall { display: inline-flex; }
.p-cart .p-empty[hidden] { display: none; }

/* The contact sheet (DAM News domain 13): tiles in a print-safe grid. */
.p-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 20px;
    margin-top: 8px;
}
.p-sheet-tile { display: flex; flex-direction: column; gap: 8px; break-inside: avoid; min-width: 0; }
.p-sheet-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--p-border);
    border-radius: 8px;
    background: var(--p-surface);
    position: relative;
}
.p-sheet-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.p-sheet-media .p-card-glyph svg { width: 28px; height: 28px; }
.p-sheet-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sheet-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--p-text-muted); }
.p-sheet-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }

@media print {
    .p-header, .p-topbar, .p-cart-actions, .p-preview-ribbon { display: none !important; }
    html, body { background: #fff; color: #000; }
    .p-main { max-width: none; padding: 0; }
    .p-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
    .p-sheet-media { border-color: #ddd; background: #fff; }
}

/* ── The universal viewer, headless (no built-in chrome) ─────────────
   The media panel becomes the viewer's definite-height stage; one quiet
   dark capsule floats over it with the format's actions. The fallback
   layer (thumbnail / type artwork) sits under the stage - scripts off or
   a runtime failure leave exactly that, never a broken frame. */

.p-resource-media.is-viewer {
    display: block;
    height: min(76vh, 940px);
    min-height: 380px;
}

.p-resource-media.is-viewer[data-kind="audio"] { height: 300px; min-height: 0; }

.p-viewer-host { position: absolute; inset: 0; }

/* The bootstrap's cold-start cover is light-DOM - theme it with the
   portal's surface so a dark visit never flashes a light panel. */
.p-viewer-host .bf-document-viewer-loading { background: var(--p-surface); }

.p-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

.p-viewer-fallback img { display: block; max-width: 100%; max-height: 74vh; }

.p-resource-media.is-viewer .p-viewer-fallback {
    position: absolute;
    inset: 0;
}

.p-resource-media.is-viewer .p-viewer-fallback img { max-height: 100%; }

.p-viewer-controls {
    position: absolute;
    bottom: 16px;
    inset-inline: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.p-viewer-controls[hidden] { display: none; }

/* Media-overlay grammar: dark translucent capsule in BOTH themes - it
   floats over document content, not over the page surface. The [hidden]
   guard is load-bearing: an author display beats the UA hidden rule. */
.p-viewer-pill[hidden] { display: none; }

.p-viewer-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 980px;
    background: rgba(18, 18, 20, 0.68);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.p-viewer-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.p-viewer-btn:hover { background: rgba(255, 255, 255, 0.16); }
.p-viewer-btn svg { width: 16px; height: 16px; }
[dir="rtl"] .p-viewer-chev { transform: scaleX(-1); }

.p-viewer-zoom {
    min-width: 54px;
    padding: 0 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.p-viewer-zoom:hover { color: #ffffff; }

.p-viewer-pages {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

/* ── The lightbox: the immersive stage, never the platform Fullscreen
   API - a frosted scrim, a floating panel that pops in, its own capsule
   and one close button. Sibling of the inline stage; a fresh viewer
   mounts per open and is destroyed on close. ── */

.p-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 44px);
}

.p-lightbox[hidden] { display: none; }

.p-lightbox-scrim {
    position: absolute;
    inset: 0;
    background: var(--p-veil);
    -webkit-backdrop-filter: saturate(160%) blur(28px);
    backdrop-filter: saturate(160%) blur(28px);
    opacity: 0;
    transition: opacity 0.28s ease;
    cursor: zoom-out;
}

.p-lightbox-panel {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1680px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: calc(var(--p-radius) + 6px);
    box-shadow: 0 48px 140px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.965) translateY(12px);
    transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.p-lightbox.is-open .p-lightbox-scrim { opacity: 1; }
.p-lightbox.is-open .p-lightbox-panel { opacity: 1; transform: none; }

.p-lightbox-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 8;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.p-lightbox-close:hover { background: rgba(18, 18, 20, 0.75); }
.p-lightbox-close svg { width: 15px; height: 15px; }

/* The collection walk's chrome: a position cue + details door top-start,
   edge steppers at the panel's sides - the classic lightbox grammar. */
.p-lightbox-top {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.p-lightbox-counter {
    padding: 8px 13px;
    border-radius: 980px;
    background: rgba(18, 18, 20, 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
}

.p-lightbox-info {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    color: rgba(255, 255, 255, 0.92);
    transition: background-color 0.15s ease;
}

.p-lightbox-info:hover { background: rgba(18, 18, 20, 0.75); }
.p-lightbox-info svg { width: 16px; height: 16px; }

.p-lightbox-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 8;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 18, 20, 0.55);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.p-lightbox-nav:hover { background: rgba(18, 18, 20, 0.78); }
.p-lightbox-nav svg { width: 18px; height: 18px; }
.p-lightbox-nav-prev { inset-inline-start: 14px; }
.p-lightbox-nav-next { inset-inline-end: 14px; }

/* ── Customer prose blocks (sanitized on save) ── */

.p-prose { max-width: 68ch; padding: calc(var(--p-gap) * 1.2) 0 0; line-height: 1.6; }
.p-prose h2, .p-prose h3, .p-prose h4 { letter-spacing: -0.016em; line-height: 1.25; margin: 1.4em 0 0.45em; }
.p-prose a { color: var(--p-brand); text-decoration: none; }
.p-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-prose ul, .p-prose ol { margin: 0.6em 0; padding-inline-start: 22px; }
.p-prose li { margin: 4px 0; }
.p-prose blockquote {
    margin: 1em 0;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--p-border-strong);
    color: var(--p-text-muted);
}
.p-prose img { max-width: 100%; height: auto; border-radius: var(--p-radius); }

/* ── Resource page (redesign 2026-09-16, the approved canvas) ──
   The order of the facts column is the page's grammar: eyebrow (kind ·
   format · dimensions) -> headline -> meta line (ONE identifier chip, the
   published date) -> the verbs, always in view -> prose -> the vocabulary
   rows -> the details grid. The stage's controls live in a reserved strip
   UNDER the picture; nothing ever covers it. ── */

/* The top row: the way back at the start; on a phone the collection walk
   rides its end (on desktop the walk sits in the stage strip). */
.p-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0 18px;
}

.p-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.p-back > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-back-chev { width: 14px; height: 14px; flex: none; }
[dir="rtl"] .p-back-chev { transform: scaleX(-1); }
.p-back:hover { color: var(--p-text); }

/* The collection walk: previous · position · next, hairline rounds. An
   edge keeps its seat (visibility, never display) so the cue never jumps. */
.p-walk { display: inline-flex; align-items: center; gap: 6px; }

.p-walk-pos {
    min-width: 48px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--p-text-muted);
}

.p-walk-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--p-border);
    border-radius: 50%;
    background: transparent;
    color: var(--p-text);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-walk-btn:hover { background: var(--p-surface); border-color: var(--p-border-strong); }
.p-walk-btn svg { width: 14px; height: 14px; }
.p-walk-btn.is-edge { visibility: hidden; }
.p-walk-top { display: none; }

.p-resource-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: calc(var(--p-gap) * 2.3);
    align-items: start;
}

.p-resource-stage { min-width: 0; }

/* The reserved strip under the stage: the walk at the start, the viewer's
   capsule in the middle column, so it is centred whatever stands beside
   it. Its height is reserved BEFORE the capsule wires - the reveal moves
   nothing (zero layout shift by construction). */
.p-stage-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    margin-top: 12px;
    gap: 12px;
}

.p-stage-strip > .p-walk { grid-column: 1; justify-self: start; }
.p-stage-strip > .p-viewer-controls {
    grid-column: 2;
    position: static;
    inset: auto;
    justify-content: center;
    pointer-events: auto;
}
.p-stage-strip > .p-viewer-controls[hidden] { display: none; }
.p-stage-strip .p-viewer-pill { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }

.p-resource-media {
    border-radius: calc(var(--p-radius) + 4px);
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.p-resource-media img,
.p-resource-media video {
    display: block;
    max-width: 100%;
    max-height: 74vh;
}

.p-resource-media audio { width: min(560px, 90%); margin: 56px 0; }

.p-resource-facts { position: sticky; top: 90px; min-width: 0; }

/* The eyebrow: kind glyph · kind word · format · dimensions - one line of
   glyph + word units, muted, uppercase. */
.p-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p-text-muted);
}

.p-eyebrow-glyph { display: inline-flex; width: 14px; height: 14px; flex: none; }
.p-eyebrow-glyph svg { width: 14px; height: 14px; }
.p-dot { opacity: 0.5; }

.p-headline {
    margin: 10px 0 0;
    font-family: var(--p-font);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* The meta line: the identifier chip and the published date, glyph + word
   units 14px apart. */
.p-metaline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--p-text-muted);
}

.p-meta-unit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.p-meta-glyph { width: 13px; height: 13px; flex: none; }

/* The identifier (issue #426): ONE chip IS the copy verb - the value and
   its glyph in one 28px pill, the glyph flipping to a check while the copy
   lands (copy-text.js adds is-copied for 1.4 s). The cote an external
   reader cites travels from the fiche as it does back office. */
.p-idchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 6px 0 11px;
    border: 1px solid var(--p-border-strong);
    border-radius: 980px;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--p-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-idchip:hover { background: color-mix(in srgb, var(--p-text) 7%, transparent); }
.p-idchip.is-copied { border-color: var(--p-text); }
.p-idchip-value { white-space: nowrap; }
.p-idchip-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--p-text-muted);
}
.p-idchip-glyph svg { width: 13px; height: 13px; }
.p-idchip:hover .p-idchip-glyph, .p-idchip.is-copied .p-idchip-glyph { color: var(--p-text); }
.p-idchip .copy-text-btn-check { display: none; }
.p-idchip.is-copied .copy-text-btn-icon { display: none; }
.p-idchip.is-copied .copy-text-btn-check { display: block; }
.p-idchip-quiet { padding: 0 11px; cursor: default; }

/* The verbs, always in view under the meta line: INK Download, quiet
   neighbours, every glyph 15px, words that fold under 600px. */
.p-actions { margin-top: 20px; }
.p-btn { gap: 8px; }
.p-btn-glyph { width: 15px; height: 15px; flex: none; }
.p-btn-icon { padding-inline: 13px; }
.p-btn-sm { padding: 7px 15px; font-size: 13px; }
.p-btn .copy-text-btn-check { display: none; }
.p-btn.is-copied .copy-text-btn-icon { display: none; }
.p-btn.is-copied .copy-text-btn-check { display: block; }
summary.p-btn { list-style: none; }

/* Prose: the FIRST long text of the notice reads as the card's paragraph
   beside the picture, no label - the description a reader checks before
   downloading. Every other fact lives in the ledger under the stage. */
.p-fiche-prose { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--p-border); }
.p-fiche-prose p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.p-fiche-prose p:last-child { margin-bottom: 0; }

/* ── Footer + paused ── */

.p-footer {
    margin-top: 96px;
    padding: 26px 0 0;
    border-top: 1px solid var(--p-border);
    font-size: 12px;
    color: var(--p-text-muted);
}

.p-paused {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.p-paused h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.p-paused p { color: var(--p-text-muted); margin: 0; font-size: 15px; }

/* ── Small screens ── */

@media (max-width: 720px) {
    :root { --p-pad: 20px; }
    .p-header-inner { gap: 14px; min-height: 52px; }
    .p-header-left { gap: 14px; }
    .p-header-utils { gap: 6px; }
    .p-main { padding-bottom: 64px; }
    .p-hero { padding-top: 40px; }
    .p-hero-sub { font-size: 17px; }
    .p-search { max-width: none; }
    .p-resource-panel { grid-template-columns: 1fr; gap: calc(var(--p-gap) * 1.2); }
    .p-resource-facts { position: static; }
    .p-resource-media { min-height: 220px; }
    .p-resource-media.is-viewer { height: min(62vh, 640px); min-height: 300px; }
    .p-resource-media.is-viewer[data-kind="audio"] { height: 260px; min-height: 0; }
    .p-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .p-footer { margin-top: 64px; }
}

/* ── The access door (#284): one centered card over the theme's canvas -
   the only page a sessionless visitor of a gated portal ever sees. ── */
.p-access {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    background: var(--p-surface);
}
.p-access-card {
    width: min(400px, 100%);
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: calc(var(--p-radius) + 8px);
    padding: 40px 32px 34px;
    box-shadow: var(--p-lift);
    text-align: center;
}
.p-access-brand { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.p-access-lead { margin: 0 0 26px; color: var(--p-text-muted); font-size: 14px; }
.p-access-form { display: flex; flex-direction: column; gap: 10px; text-align: start; }
.p-access-label { font-size: 12px; font-weight: 600; color: var(--p-text-muted); }
.p-access-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--p-border-strong);
    border-radius: calc(var(--p-radius) - 2px);
    font: inherit;
    font-size: 15px;
    background: var(--p-bg);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.p-access-input:focus {
    outline: none;
    border-color: var(--p-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-brand) 10%, transparent);
}
.p-access-input-code { letter-spacing: 0.35em; text-align: center; font-size: 20px; }
.p-access-go {
    margin-top: 10px;
    padding: 12px 16px;
    border: 0;
    border-radius: 980px;
    background: var(--p-ink);
    color: var(--p-ink-text);
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.p-access-go:hover { background: color-mix(in srgb, var(--p-ink) 85%, var(--p-bg)); }
.p-access-sent { margin: 0 0 14px; font-size: 13px; color: var(--p-text-muted); }
.p-access-error { margin: 0; font-size: 13px; color: #e0362c; }
.p-access-again { margin-top: 16px; }
.p-access-resend {
    border: 0;
    background: none;
    color: var(--p-text-muted);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.p-access-resend:hover { color: var(--p-text); }

/* The door's second face (#326): the quiet line under a pane that walks to
   the other one - members to their login, strangers back to the gate. */
.p-access-alt {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--p-border);
    font-size: 13px;
    color: var(--p-text-muted);
}
.p-access-alt a {
    color: var(--p-text);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.p-access-alt a:hover { color: var(--p-brand); }

.p-access-forgot { margin: 14px 0 0; font-size: 12px; }
.p-access-forgot a {
    color: var(--p-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.p-access-forgot a:hover { color: var(--p-text); }

/* ── The signup pane (#328) ── */

.p-access-hint { margin: -4px 0 0; font-size: 12px; color: var(--p-text-muted); }

/* The decoy field lives far off canvas - never display:none (some bots
   skip those), never in the tab order, never announced. */
.p-access-hp {
    position: absolute;
    inset-inline-start: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The proof-of-work capsule: ONE reserved row whose two states swap in
   place (spinner -> check), pixel-stable by construction. */
.p-access-pow {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 2px;
    font-size: 12px;
    color: var(--p-text-muted);
}

.p-access-pow-wait, .p-access-pow-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The explicit display above would beat the hidden attribute's UA rule -
   restate the contract: hidden means gone. */
.p-access-pow-wait[hidden], .p-access-pow-ok[hidden] { display: none; }

.p-access-pow-ok svg { width: 13px; height: 13px; }
.p-access-pow-ok { color: var(--p-text); }

.p-access-pow-spin {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1.5px solid var(--p-border-strong);
    border-top-color: var(--p-text-muted);
    border-radius: 50%;
    animation: p-pow-spin 0.7s linear infinite;
}

@keyframes p-pow-spin { to { transform: rotate(360deg); } }

.p-access-pow-noscript { color: var(--p-text-muted); }

/* ── The SSO doors (#331): the org's providers as quiet full-width
   buttons over the credentials form, split by a hairline "or". ── */
.p-access-sso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.p-access-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--p-text);
    background: var(--p-bg);
    border: 1px solid var(--p-border-strong);
    border-radius: calc(var(--p-radius) - 2px);
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-access-sso-btn:hover { background: var(--p-surface); }
.p-access-sso-btn svg { width: 16px; height: 16px; flex: none; color: var(--p-text-muted); }
.p-access-sso-glyph { display: inline-grid; place-items: center; flex: none; }

.p-access-sso-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--p-text-muted);
    -webkit-user-select: none;
    user-select: none;
}

.p-access-sso-or::before, .p-access-sso-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--p-border);
}

/* The quiet success note over the login pane (a just-confirmed address). */
.p-access-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -12px 0 18px;
    font-size: 13px;
    color: var(--p-text);
}
.p-access-notice svg { width: 15px; height: 15px; flex: none; }

/* The honest end-states: check-your-inbox / awaiting-approval. */
.p-access-done { padding: 6px 0 2px; }
.p-access-done-mark {
    width: 34px;
    height: 34px;
    color: var(--p-text-muted);
    margin-bottom: 12px;
}
.p-access-done-title { margin: 0 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.p-access-done-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--p-text-muted); }

/* Two switch links sharing the alt row split it in halves. */
.p-access-alt-gate { flex-basis: 100%; margin-top: 2px; }

/* ── The stage hugs its format (no dead bands): photographic and video
   stages take the format's natural shape, clamped to the viewport;
   documents keep their tall reading panel. Placed last so the shape
   wins over the base stage sizing. ── */

.p-resource-media.is-viewer[data-kind="image"] {
    height: auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 76vh;
}

/* Frameless media: photographs, film and sound float on the page itself -
   no gray mat, no border, so a fit sliver or a letterbox band shows
   nothing but the page (portal.js also clears the in-shadow surface and
   the scroll chrome for these kinds). */
.p-resource-media.is-viewer[data-kind="image"],
.p-resource-media.is-viewer[data-kind="video"],
.p-resource-media.is-viewer[data-kind="audio"] {
    background: transparent;
    border-color: transparent;
}

/* While a media stage loads, the cover wears the page itself. */
.p-resource-media.is-viewer[data-kind="image"] .bf-document-viewer-loading,
.p-resource-media.is-viewer[data-kind="video"] .bf-document-viewer-loading,
.p-resource-media.is-viewer[data-kind="audio"] .bf-document-viewer-loading { background: var(--p-bg); }

.p-resource-media.is-viewer[data-kind="video"] {
    height: auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 76vh;
}

/* ── The download menu: one ink verb, honest size rows underneath -
   fixed-positioned by portal.js (flipped when tight), or laid static
   inside the terms panel. ── */

.p-dl { position: relative; display: inline-flex; }

.p-dl-caret { width: 12px; height: 12px; margin-inline-start: 2px; }

.p-dlmenu {
    position: fixed;
    z-index: 45;
    min-width: 280px;
    padding: 6px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.p-dlmenu[hidden] { display: none; }

.p-dlmenu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--p-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.006em;
    transition: background-color 0.13s ease;
}

.p-dlmenu-row:hover { background: var(--p-surface); }

.p-dlmenu-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 500;
    color: var(--p-text-muted);
    font-variant-numeric: tabular-nums;
}

.p-dlmenu-glyph { flex: none; width: 15px; height: 15px; color: var(--p-text-muted); }
.p-dlmenu-row:hover .p-dlmenu-glyph { color: var(--p-text); }

/* Inside the terms panel the same rows lie flat - a list, not a popover. */
.p-dlmenu-static {
    position: static;
    min-width: 0;
    margin-top: 4px;
    padding: 4px;
    box-shadow: none;
    background: transparent;
}

/* ── Download lifecycle on ANY [data-p-dl] control: a quiet spinner while
   the bytes travel, a brief red word on refusal - never a navigation. ── */

[data-p-dl].is-busy { pointer-events: none; }
[data-p-dl].is-busy .p-dlmenu-glyph,
[data-p-dl].is-busy .p-dl-glyph { display: none; }
[data-p-dl].is-busy::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 50%;
    animation: p-spin 0.7s linear infinite;
}

@keyframes p-spin { to { transform: rotate(1turn); } }

.p-dlmenu-row.is-error { color: #e0362c; }
.p-btn[data-p-dl].is-error,
.p-card-quick-btn[data-p-dl].is-error { box-shadow: 0 0 0 3px color-mix(in srgb, #e0362c 40%, transparent); }

/* ── The selection chip's little acknowledgement when a fetch-add lands. ── */

.p-cart-link.p-chip-bump { animation: p-chip-bump 0.32s ease; }

@keyframes p-chip-bump {
    40% { transform: scale(1.12); }
}

/* ── One motion language across pages: same-origin navigations cross-fade,
   and a card's media morphs into the resource stage (the pr-{n} names the
   pages share). Browsers without the API simply navigate; reduced motion
   turns it off entirely. ── */

@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* The chrome does not travel: both pages name the header, so it holds rock
   still while only the content beneath it transitions. */
.p-header { view-transition-name: p-header; }

/* The page itself switches as the app's does (app-shell.css "Page switches"):
   the old and the new picture on ONE clock, so a pixel both pages share never
   dips and only what differs dissolves; nothing drifts. The named groups
   (header, media morphs) are their own layers and stay untouched by this.
   Pinned by PageTransitionTests. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: cubic-bezier(.65, 0, .35, 1); animation-delay: 0s; }

/* The media morph (card tile <-> resource stage) rides one tuned curve. The
   class groups every pr-{n} pair without enumerating names; engines without
   view-transition-class keep the UA default - never broken, just plainer. */
.p-card-media, .p-resource-media { view-transition-class: p-media; }

::view-transition-group(.p-media) {
    animation-duration: 0.34s;
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* A page that ARRIVED through the cross-document transition is already
   staged by it: the grid's entrance rise stands down there (portal.js flags
   the arrival from pagereveal, before first paint). Replaying the rise under
   the fade is what read as every card refreshing a second time. */
html[data-p-vt-nav] .p-grid .p-card { animation: none; }

/* ── Brand presence (#284 Designer v2): the customer's accent marks the
   interactive layer - the brand link, the selection chip, the door's own
   button - so a brand change is VISIBLE, while surfaces stay quiet. ── */
.p-header-brand { color: var(--p-brand); }
.p-cart-link { border-color: color-mix(in srgb, var(--p-brand) 45%, transparent); color: var(--p-brand); }
.p-access-go { background: var(--p-brand); }

/* ── Brand logo (iteration 2): the ONE brand renderer's image form. The
   header keeps its cap height; the access door gets the larger stage. A
   text brand keeps every rule above - the logo only replaces the letters. ── */
.p-brand { display: inline-flex; align-items: center; }
/* A customer's logo is a lockup (a wordmark, often a tagline under it, #642: Nausicaá's "BOULOGNE-SUR-MER" read as a
   smudge at 24px): it gets a stage of its own - 44px tall, up to 300px wide - and the header grows around it, never the
   logo shrinking into the text brand's cap height (the access door's own 44px). A phone keeps it legible at 34px. */
.p-brand-logo { display: block; height: 44px; width: auto; max-width: 300px; object-fit: contain; }
.p-header-inner:has(.p-brand-logo) { min-height: 68px; padding-block: 12px; }
/* The link that carries a logo is a box, not a line of text: no line box under the picture, so the logo sits on the
   header's exact middle (an inline link left it a pixel low). */
.p-header-brand:has(.p-brand-logo) { display: flex; align-items: center; line-height: 0; }
/* A logo drawn on white (a JPG, #642: Nausicaa's sat in a white box over the frosted header as a photograph scrolled
   under it) melts into whatever stands behind it: multiplied, its white is the surface's own colour and its ink stays
   ink. Light paint only - the dark paint has its own logo slot (the dark variant the brand renderer swaps in). A
   frosted header is a group of its own (backdrop-filter): the logo could only blend with its veil, never with the
   photograph seen through it, and the white box stayed. A header that carries a logo stands on the page's own solid
   ground instead - the cleanest stage for a brand, and the one the logo melts into. */
html:not([data-theme="dark"]) .p-brand-logo { mix-blend-mode: multiply; }
.p-header:has(.p-brand-logo) { background: var(--p-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 720px) {
    .p-brand-logo { height: 34px; max-width: 210px; }
    .p-header-inner:has(.p-brand-logo) { min-height: 56px; padding-block: 8px; }
}
.p-access-brand .p-brand { justify-content: center; width: 100%; }
.p-access-brand .p-brand-logo { height: 44px; max-width: 300px; }

/* ── Hero image (iteration 3): the hero block's scene. The picture sits
   UNDER the words behind an editorial left-to-right scrim of the page
   background, so the heading keeps its ink whatever the photograph; a
   compact (result-state) hero drops the scene entirely. ── */
.p-hero.has-media:not(.p-hero-compact) {
    position: relative; isolation: isolate; z-index: 1;
    border-radius: var(--p-radius); padding: 58px clamp(24px, 5vw, 56px);
}
/* The scene is clipped by its OWN stage, never by the hero: the search
   suggestions hang past the hero's bottom edge, over the blocks below
   (z-index: 1 lifts the hero over the later sections). */
.p-hero.has-media:not(.p-hero-compact) > .p-hero-stage {
    position: absolute; inset: 0; z-index: -2;
    overflow: hidden; border-radius: inherit;
}
.p-hero.has-media:not(.p-hero-compact) .p-hero-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}
.p-hero.has-media:not(.p-hero-compact)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(90deg,
        var(--p-bg) 0%,
        color-mix(in srgb, var(--p-bg) 72%, transparent) 48%,
        color-mix(in srgb, var(--p-bg) 30%, transparent) 100%);
}
.p-hero-compact .p-hero-stage { display: none; }
/* A hero that carries a scene is the page's banner: it spans the whole
   measure (the grid's width, never the 820px reading cap of the bare
   editorial hero), while its words and search keep their reading width. */
.p-hero.has-media:not(.p-hero-compact) { max-width: none; }
.p-hero.has-media:not(.p-hero-compact) > :not(.p-hero-stage) { max-width: 720px; }
.p-hero.has-media:not(.p-hero-compact) > .p-search { max-width: 560px; }

/* ── Legal pages + footer links (iteration 4) ── */
.p-legal { max-width: 860px; }
.p-legal-title { font-family: var(--p-font); margin: 0 0 18px; }
.p-footer-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.p-footer-links a { color: inherit; text-decoration: none; }
.p-footer-links a:hover { color: var(--p-brand); }

/* ── Header links (iteration 5, #326 deep pass): the customer's quiet
   outbound navigation, riding the LEFT cluster beside the brand - never
   at the utilities' level, never wearing the accent (that belongs to the
   brand mark and the selection chip alone). ── */
.p-nav { display: flex; align-items: center; gap: 20px; min-width: 0; overflow: hidden; }
.p-nav-link {
    color: var(--p-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.006em;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.p-nav-link:hover { color: var(--p-text); }
@media (max-width: 720px) { .p-nav { display: none; } }

/* ── Film mark (user report): a video frame wears quiet sprocket bands
   top and bottom, so motion reads at a glance without any play chrome.
   Only over a REAL frame - the type artwork already names pending
   videos. ── */
.p-card-media[data-kind="video"].has-frame::before,
.p-card-media[data-kind="video"].has-frame::after {
    /* z-2: the frame img is itself a positioned z-1 layer (shimmer fade),
       and on a tie tree order buries ::before under it while ::after wins -
       both bands must sit above the image. */
    content: ""; position: absolute; left: 0; right: 0; height: 11px; z-index: 2;
    background-color: rgba(10, 10, 12, 0.78);
    background-image: radial-gradient(circle, rgba(245, 245, 247, 0.85) 0 1.8px, transparent 2.4px);
    background-size: 13px 11px;
    background-position: 6px 50%;
    background-repeat: repeat-x;
    pointer-events: none;
}
.p-card-media[data-kind="video"].has-frame::before { top: 0; }
.p-card-media[data-kind="video"].has-frame::after { bottom: 0; }

/* ── The position cue states where the visitor stands ── */
.p-pager-state { font-size: 13px; color: var(--p-text-muted); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   Discovery (redesign 2026-09-16, the approved canvas): the facet line,
   the public collections' shelf, the vocabulary suggestions, the card's
   corner marks and glyph + word meta, the catalog rail and the phone fold.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The facet line: ONE line of narrowing chips, the order at its end ── */
.p-facetbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: calc(var(--p-gap) * 1.2);
    padding: 12px 0;
    border-top: 1px solid var(--p-border);
    border-bottom: 1px solid var(--p-border);
}

.p-facets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.p-facets-end { flex: none; }
.p-fseg { display: inline-flex; align-items: center; gap: 8px; }
.p-fsep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--p-border); }

.p-fchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--p-border);
    border-radius: 980px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--p-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.p-fchip::-webkit-details-marker { display: none; }
.p-fchip::marker { content: ""; }
.p-fchip:hover { background: var(--p-surface); }
/* The ONE selection mark: the soft ink wash and its hairline ring. */
.p-fchip.is-on {
    background: color-mix(in srgb, var(--p-text) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-text) 10%, transparent);
    border-color: transparent;
}
.p-fchip-n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--p-text-muted); }
.p-fchip.is-on .p-fchip-n { color: var(--p-text); }
.p-fchip-glyph { width: 14px; height: 14px; flex: none; color: var(--p-text-muted); }
.p-fchip .p-menu-chev { width: 11px; height: 11px; flex: none; color: var(--p-text-muted); transition: transform 0.15s ease; }
.p-facet[open] > .p-fchip .p-menu-chev { transform: rotate(180deg); }
.p-facet[open] > .p-fchip:not(.is-on) { background: var(--p-surface); }
.p-fchip-clear { height: 30px; padding: 0 11px 0 9px; font-size: 12px; }

/* Facet popovers ride the header's menu grammar, anchored at the chip's start. */
.p-facet { position: relative; }
.p-facet-pop { min-width: 240px; inset-inline-start: 0; inset-inline-end: auto; }
.p-facet-pop-end { inset-inline-start: auto; inset-inline-end: 0; }
.p-facet-pop .p-menu-item { gap: 10px; }
.p-menu-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.p-menu-n { margin-inline-start: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--p-text-muted); }
.p-menu-item.is-current .p-menu-n { color: var(--p-text); }
/* A colour VALUE wears its swatch (a value, never a status dot). */
.p-swatch { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
html[data-theme="dark"] .p-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.p-orient { display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.7; }
.p-orient-l { width: 16px; height: 11px; }
.p-orient-p { width: 11px; height: 16px; }
.p-orient-s { width: 13px; height: 13px; }

/* The phone's ONE door and its sheet of groups (hidden on wide screens). */
.p-facet-all { display: none; }
.p-facet-sheet { min-width: min(340px, calc(100vw - 32px)); padding: 8px; }
.p-sheet-group + .p-sheet-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--p-border); }
.p-sheet-h {
    display: block;
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p-text-muted);
}

/* The count line under the facets: how many, and the way out of a narrowing. */
.p-results-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--p-text-muted);
}
.p-results-count { font-variant-numeric: tabular-nums; }
.p-results[aria-busy="true"] .p-grid { opacity: 0.6; transition: opacity 0.15s ease; }

/* ── The catalog layout: an always-open rail beside the grid ── */
.p-results.is-catalog {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: calc(var(--p-gap) * 1.6);
    align-items: start;
    margin-top: calc(var(--p-gap) * 1.2);
}
.p-results.is-catalog .p-results-body { min-width: 0; }
.p-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 18px; }
.p-rail-group { display: flex; flex-direction: column; gap: 2px; }
.p-rail-h {
    margin: 0 0 6px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--p-text-muted);
}
.p-rail .p-menu-item { padding: 7px 12px; }
.p-rail .p-menu-item.is-current {
    background: color-mix(in srgb, var(--p-text) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-text) 10%, transparent);
}
.p-facetbar.is-rail-fallback { display: none; }
.p-results.is-catalog .p-results-line { margin-top: 0; }

/* ── The card's corner marks and its meta units ── */
.p-grid[data-ratio="1x1"] .p-card-media { aspect-ratio: 1 / 1; }
/* Natural shapes flow as a masonry: CSS columns, each card unbroken. */
.p-grid[data-ratio="natural"] {
    display: block;
    columns: 4 230px;
    column-gap: var(--p-gap);
    padding-top: calc(var(--p-gap) * 1.4);
}
.p-grid[data-ratio="natural"] .p-card {
    display: inline-flex;
    width: 100%;
    margin-bottom: calc(var(--p-gap) * 1.7);
    break-inside: avoid;
}
.p-card-media.is-natural { aspect-ratio: auto; }
/* Corner marks: plate-less glyphs with a drop shadow (the tile's flag
   family) - the kind top-start over a real frame, the identifier bottom-start. */
.p-card-kind {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    display: inline-flex;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}
.p-card-kind svg { width: 16px; height: 16px; }
.p-card-id {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.p-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: var(--p-text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.p-card-meta-glyph { display: inline-flex; width: 14px; height: 14px; flex: none; }
.p-card-meta-glyph svg { width: 14px; height: 14px; }

/* ── The collections' shelf ── */
.p-shelf-section { padding-top: calc(var(--p-gap) * 1.6); }
.p-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.p-h2 h2 { margin: 0; font-family: var(--p-font); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.p-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--p-gap);
    margin-top: 18px;
}
.p-coll { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.p-coll-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius);
    background: var(--p-surface);
    position: relative;
    isolation: isolate;
    transition: border-color 0.3s ease, box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The hover (#642, "make hover effect more premium"): ONE calm gesture on one curve - the card rises a hair on a soft,
   deep shadow, each picture drifts closer (the big one slowest, the small ones a beat after), a quiet scrim settles at
   the foot so the photographs read as one object, and the name takes the brand's ink. Keyboard focus plays the same;
   reduced motion keeps the light and drops the movement. */
.p-coll-mosaic::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 46%);
    opacity: 0; transition: opacity 0.5s ease;
}
.p-coll:hover .p-coll-mosaic,
.p-coll:focus-visible .p-coll-mosaic {
    border-color: var(--p-border-strong);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), var(--p-lift);
    transform: translateY(-3px);
}
.p-coll:hover .p-coll-mosaic::after,
.p-coll:focus-visible .p-coll-mosaic::after { opacity: 1; }
.p-coll:focus-visible { outline: none; }
.p-coll:focus-visible .p-coll-mosaic { outline: 2px solid var(--p-brand); outline-offset: 3px; }
.p-coll-cell { display: block; overflow: hidden; background: var(--p-surface-2); }
.p-coll-cell.is-big { grid-row: 1 / 3; }
.p-coll-cell img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
.p-coll-cell:nth-child(2) img { transition-delay: 40ms; }
.p-coll-cell:nth-child(3) img { transition-delay: 80ms; }
.p-coll:hover .p-coll-cell img,
.p-coll:focus-visible .p-coll-cell img { transform: scale(1.06); filter: saturate(1.08); }
.p-coll:hover .p-coll-cell.is-big img,
.p-coll:focus-visible .p-coll-cell.is-big img { transform: scale(1.04); }
.p-coll-name { transition: color 0.3s ease; }
.p-coll:hover .p-coll-name,
.p-coll:focus-visible .p-coll-name { color: var(--p-brand); }
@media (prefers-reduced-motion: reduce) {
    .p-coll:hover .p-coll-mosaic, .p-coll:focus-visible .p-coll-mosaic { transform: none; }
    .p-coll:hover .p-coll-cell img, .p-coll:focus-visible .p-coll-cell img { transform: none; }
}
.p-coll-mosaic[data-covers="1"] { grid-template-columns: 1fr; }
.p-coll-mosaic[data-covers="1"] .p-coll-cell:not(.is-big) { display: none; }
.p-coll-mosaic[data-covers="2"] .p-coll-cell:nth-child(2) { grid-row: 1 / 3; }
.p-coll-mosaic[data-covers="2"] .p-coll-cell:nth-child(3) { display: none; }
.p-coll-name { margin-top: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-coll-meta { margin-top: 2px; font-size: 12px; color: var(--p-text-muted); }
.p-collection-head { padding-top: 6px; }
.p-collection-head .p-eyebrow { margin-bottom: 8px; }

/* ── The vocabulary suggestions under the search capsule ── */
.p-suggest {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 30;
    padding: 6px;
    background: var(--p-bg);
    border: 1px solid var(--p-border);
    border-radius: 12px;
    box-shadow: var(--p-lift);
}
.p-suggest[hidden] { display: none; }
.p-suggest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--p-text);
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.p-suggest-row:hover, .p-suggest-row.is-active { background: var(--p-surface); }
.p-suggest-glyph { width: 14px; height: 14px; flex: none; color: var(--p-text-muted); }
.p-suggest-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-suggest-text b { font-weight: 700; }
.p-suggest-field { font-size: 12px; color: var(--p-text-muted); white-space: nowrap; }
.p-suggest-n { margin-inline-start: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--p-text-muted); }

/* ── The sized download: ONE more row in the download menu ── */
.p-dlmenu { min-width: 300px; }
/* Inside the terms panel the rows lie flat and take the panel's width - never wider. */
.p-dlmenu-static { min-width: 0; max-width: 100%; }
.p-dlmenu-row { min-width: 0; }
.p-dlmenu-main { min-width: 0; overflow-wrap: anywhere; }
.p-terms-body { max-width: min(62ch, 100%); }
.p-dlmenu-custom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--p-border);
}
.p-dlmenu-custom .p-dlmenu-main { font-size: 14px; font-weight: 600; letter-spacing: -0.006em; }
.p-dlmenu-edges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.p-edge {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--p-border);
    border-radius: 980px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--p-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.p-edge:hover { background: var(--p-surface); }
.p-edge.is-on {
    background: color-mix(in srgb, var(--p-text) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-text) 10%, transparent);
    border-color: transparent;
}
.p-edge-input {
    width: 76px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--p-border-strong);
    border-radius: 8px;
    background: var(--p-bg);
    color: var(--p-text);
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.p-edge-input:focus { outline: none; border-color: var(--p-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-brand) 10%, transparent); }
.p-dlmenu-custom .p-btn { align-self: flex-start; }
[data-p-dl-custom-go].is-busy { pointer-events: none; }
[data-p-dl-custom-go].is-busy .p-btn-glyph { display: none; }
[data-p-dl-custom-go].is-busy::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 50%;
    animation: p-spin 0.7s linear infinite;
}
[data-p-dl-custom-go].is-error { box-shadow: 0 0 0 3px color-mix(in srgb, #e0362c 40%, transparent); }

/* ── Small screens: the chips fold into the one door, the walk rides the
   top row, quiet verbs keep their glyph and drop their word ── */
@media (max-width: 720px) {
    .p-facets > .p-fseg, .p-facets > .p-fsep, .p-facets > .p-facet:not(.p-facet-all):not(.is-on) { display: none; }
    .p-facet-all { display: block; }
    .p-facet-sheet {
        position: fixed;
        inset: auto 12px 12px 12px;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        min-width: 0;
    }
    .p-facets-end .p-facet-pop-end { inset-inline-start: auto; inset-inline-end: 0; }
    .p-walk-strip { display: none; }
    .p-walk-top { display: inline-flex; }
    .p-stage-strip { grid-template-columns: 1fr; justify-items: center; }
    .p-stage-strip > .p-viewer-controls { grid-column: 1; }
    /* The walk rides the top row here; a strip that held only the walk
       has nothing left to show and folds - never a dead band under the stage. */
    .p-stage-strip:not(.has-capsule) { display: none; }
    /* The fiche's two verbs keep their words on a phone (the whole control
       drops to the next line when the width says so); the selection page's
       row verbs still fold to their glyph. */
    .p-cart-actions .p-btn-word { display: none; }
    .p-cart-actions .p-btn-quiet { padding-inline: 13px; }
    .p-headline { font-size: 24px; }
    .p-cart-head { flex-direction: column; align-items: stretch; }
    .p-cart-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .p-cart-row .p-idchip-quiet { display: none; }
    .p-cart-plate { width: 56px; }
    .p-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .p-grid[data-ratio="natural"] { columns: 2 140px; }
}

@media (max-width: 900px) {
    .p-results.is-catalog { grid-template-columns: 1fr; }
    .p-results.is-catalog .p-rail { display: none; }
    .p-facetbar.is-rail-fallback { display: flex; }
    .p-results.is-catalog .p-results-line { margin-top: 16px; }
}

/* ── The custom step's format and colour rows (issues #471 + #472): the same
   chips, a small muted row label ahead of them, CMYK disabled honestly while
   the picked format cannot carry it. ── */
.p-dlmenu-rowlabel { flex: 0 0 auto; min-width: 52px; font-size: 12px; font-weight: 600; color: var(--p-text-muted); }
.p-edge:disabled { opacity: .45; cursor: not-allowed; }
.p-edge:disabled:hover { background: transparent; }

/* ── The fiche ledger (2026-09-17, third pass): every catalog fact under the
   stage in chapters - Keywords, Details, Usage rights - the chapter's name at
   the left, ONE label axis (168px) for the whole page, values at the right.
   Hairlines separate chapters only, never rows; a label is sentence case,
   13px, muted; a value is 14px in the text colour. ── */

.p-fiche { margin-top: 52px; border-top: 1px solid var(--p-border); }

.p-chapter {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
    padding: 30px 0 34px;
}

.p-chapter + .p-chapter { border-top: 1px solid var(--p-border); }

.p-chapter-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.3;
}

.p-chapter-head svg { width: 16px; height: 16px; flex: none; color: var(--p-text-muted); }

.p-rows {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 14px 28px;
    align-items: start;
    margin: 0;
}

/* A row is grid-transparent: its label and its value sit on the ledger's own
   two columns, so every label on the page shares one vertical axis. */
.p-row { display: contents; }

.p-k {
    display: flex;
    align-items: center;
    min-height: 28px;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    color: var(--p-text-muted);
    overflow-wrap: anywhere;
}

/* 3px + 22px + 3px = the 28px a chip stands: a one-line value and its label
   share a baseline, a paragraph's first line too. */
.p-v {
    min-width: 0;
    margin: 0;
    padding: 3px 0;
    max-width: 72ch;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.006em;
    overflow-wrap: anywhere;
}

.p-v b { font-weight: 550; }
.p-v a:not(.p-term) { color: var(--p-brand); text-decoration: none; }
.p-v a:not(.p-term):hover { text-decoration: underline; text-underline-offset: 3px; }
.p-v-sub { color: var(--p-text-muted); }
.p-v-sub::before { content: "·"; margin: 0 6px; opacity: 0.6; }
.p-v .p-swatch { display: inline-block; vertical-align: -2px; margin-inline-end: 8px; }

/* The vocabulary value: hairline chips that are doors, at most TWO lines at
   rest - portal.js hides the rest and writes their count into ONE soft chip
   ("+N"; aria: "Show N more") that opens the row in place; open, it reads
   "Less". A hidden chip keeps the [hidden] guard: an author display beats
   the UA rule. */
.p-v.p-vocab { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; max-width: none; }

.p-term {
    display: inline-flex;
    align-items: center;
    height: 28px;
    max-width: 100%;
    padding: 0 11px;
    border: 1px solid var(--p-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--p-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.p-term:hover { border-color: var(--p-border-strong); background: color-mix(in srgb, var(--p-text) 7%, transparent); }
.p-term[hidden], .p-term-sep[hidden] { display: none; }

.p-term-more {
    border-color: transparent;
    background: var(--p-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.p-term-more:hover { border-color: transparent; background: var(--p-surface-2); }

/* The theme's "terms as text" manner: one sentence of terms, the same fold. */
.p-vocab.is-text { display: block; padding: 3px 0; max-width: 72ch; }
.p-vocab.is-text .p-term {
    display: inline; height: auto; max-width: none; padding: 0; border: 0; border-radius: 0;
    font-size: 14px; font-weight: 400; white-space: normal; color: inherit;
}
.p-vocab.is-text .p-term:hover { background: none; color: var(--p-brand); }
.p-vocab.is-text .p-term-more {
    display: inline-flex;
    height: 24px;
    padding: 0 9px;
    margin-inline-start: 6px;
    border-radius: 8px;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-text);
    background: var(--p-surface);
}
.p-vocab.is-text .p-term-more:hover { color: var(--p-text); background: var(--p-surface-2); }

/* The second citation chip: the resource's own address, glyph first, in the
   UI voice (the identifier keeps its mono). */
.p-idchip-link { padding: 0 11px 0 7px; font-family: inherit; letter-spacing: -0.004em; }

/* ── The picture's capsule rests hidden and rises under the hand: portal.js
   stamps data-p-awake on the stage at any pointer move or touch and lifts it
   after 2.6 s of stillness; a focused control keeps it up. Faded, it also
   leaves the hit plane (visibility), so nothing invisible can be pressed.
   The lightbox's stage does the same while it shows a picture. ── */
.p-resource-media.is-viewer[data-kind="image"] > .p-viewer-controls,
.p-lightbox-panel.has-picture > .p-viewer-controls {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.p-resource-media.is-viewer[data-kind="image"][data-p-awake] > .p-viewer-controls,
.p-resource-media.is-viewer[data-kind="image"] > .p-viewer-controls:focus-within,
.p-lightbox-panel.has-picture[data-p-awake] > .p-viewer-controls,
.p-lightbox-panel.has-picture > .p-viewer-controls:focus-within {
    opacity: 1;
    visibility: visible;
}

/* The actual-size verb is a word, not a glyph: "1:1" in the capsule's own
   12px tabular voice, pressed (a soft wash) while the zoom stands at 100 %. */
.p-viewer-btn-word { width: auto; padding: 0 9px; border-radius: 980px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.p-viewer-btn.is-on { background: rgba(255, 255, 255, 0.16); }

/* Under 960px of viewport the chapter's name moves above its rows and the
   label axis narrows; on a phone labels stand above their values and the
   rows stack - the same order, one scroller, the fold still at work. */
@media (max-width: 960px) {
    .p-chapter { grid-template-columns: 1fr; gap: 16px 0; padding: 24px 0 28px; }
    .p-rows { grid-template-columns: 140px minmax(0, 1fr); gap: 14px 20px; }
}

@media (max-width: 720px) {
    .p-fiche { margin-top: 36px; }
    .p-rows { grid-template-columns: 1fr; gap: 16px 0; }
    .p-row { display: block; }
    .p-k { min-height: 0; line-height: 18px; margin-bottom: 6px; }
    .p-v { padding: 0; }
    .p-vocab.is-text { padding: 0; }
}

/* ── The justified grid (2026-10-07, optional - cards.ratio "justified") ──
   Rows that keep every picture's own proportions and line up edge to edge,
   the photo-library grammar. Pure layout, no script: each card's basis is
   its proportion (--a, stamped by _PortalCard) times the row height and it
   grows BY that proportion, so every card of a row gains the same height -
   no crop, no gap at a row's end; a filler takes the last row's slack so it
   keeps its natural height. Appended pages and swapped results lay out by
   themselves, and nothing moves after first paint. */
.p-grid[data-ratio="justified"] {
    /* The row height follows the measure: about four pictures across a desktop, two on a phone. */
    --p-row: clamp(140px, 19vw, 260px);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--p-gap) * 1.4) var(--p-gap);
}
.p-grid[data-ratio="justified"]::after { content: ""; flex: 1000000 1 0px; }
/* Laid out to the pixel by portal-justify.js: the filler has nothing left to absorb. */
.p-grid[data-ratio="justified"][data-p-justified="on"]::after { display: none; }
.p-grid[data-ratio="justified"] > .p-card {
    flex: var(--a, 1.3333) 1 calc(var(--a, 1.3333) * var(--p-row));
    min-width: 0;
    /* A row never swells past 1.4x its height to fill the line (a few wide items left alone on a row): it keeps
       its measure and stops short, like the last row. */
    max-width: calc(var(--a, 1.3333) * var(--p-row) * 1.4);
}
.p-grid[data-ratio="justified"] .p-card-media { aspect-ratio: var(--a, 1.3333); }
.p-grid[data-ratio="justified"] .p-card-media img { object-fit: cover; }
@media (max-width: 720px) { .p-grid[data-ratio="justified"] { --p-row: clamp(110px, 30vw, 160px); gap: var(--p-gap) 10px; } }

/* ── The immersive hero (2026-10-07, optional - a hero block's style "immersive") ──
   The window-wide stage: the scene (a library photo, a looping film, or the
   uploaded image) fills it, a deep scrim rises from the foot so white words
   hold on any picture, the search stands on frosted glass. Without a scene
   the stage wears the brand's own colour. A result state still folds it to
   the compact header row (the answers belong above the fold). */
/* 100vw counts the scrollbar: the stage may reach under it, never make the page scroll sideways. */
html:has(.p-hero-immersive) { overflow-x: hidden; }
/* :not(.p-hero-compact) lifts these rules over the framed hero's own (.p-hero.has-media:not(.p-hero-compact)). */
.p-hero.p-hero-immersive:not(.p-hero-compact) {
    --p-hero-gutter: max(var(--p-pad), calc((100vw - var(--p-shell)) / 2 + var(--p-pad)));
    position: relative;
    isolation: isolate;
    z-index: 1;
    max-width: none;
    margin: 0 calc(50% - 50vw) clamp(28px, 4vw, 56px);
    min-height: clamp(440px, 74svh, 880px);
    padding: clamp(64px, 10svh, 140px) var(--p-hero-gutter) clamp(44px, 7svh, 96px);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background:
        radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--p-brand) 60%, #fff) 0%, transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--p-brand) 92%, #000) 0%, color-mix(in srgb, var(--p-brand) 70%, #000) 100%);
}
.p-hero.p-hero-immersive.has-media { background: #0b0d12; }
.p-hero.p-hero-immersive .p-hero-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}
.p-hero.p-hero-immersive.has-media::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(to top, rgba(6, 8, 14, 0.78) 0%, rgba(6, 8, 14, 0.42) 38%, rgba(6, 8, 14, 0.12) 72%, rgba(6, 8, 14, 0.22) 100%),
        linear-gradient(90deg, rgba(6, 8, 14, 0.38) 0%, rgba(6, 8, 14, 0) 60%);
}
.p-hero.p-hero-immersive > :not(.p-hero-stage):not(.p-hero-motion) { max-width: 760px; }
.p-hero.p-hero-immersive h1 {
    font-size: clamp(40px, 6.2vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}
.p-hero.p-hero-immersive .p-hero-sub {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(17px, 1.6vw, 21px);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
/* The search on frosted glass; it turns solid the moment it is used. */
.p-hero.p-hero-immersive:not(.p-hero-compact) > .p-search {
    max-width: 600px;
    margin-top: clamp(24px, 4svh, 40px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    color: #fff;
}
.p-hero.p-hero-immersive .p-search input { color: inherit; }
.p-hero.p-hero-immersive .p-search input::placeholder { color: rgba(255, 255, 255, 0.72); }
.p-hero.p-hero-immersive .p-search-icon,
.p-hero.p-hero-immersive .p-search-clear { color: rgba(255, 255, 255, 0.9); }
.p-hero.p-hero-immersive .p-search-go { background: #fff; color: #111; }
.p-hero.p-hero-immersive .p-search:focus-within {
    background: rgba(255, 255, 255, 0.97);
    border-color: transparent;
    color: var(--p-text);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.p-hero.p-hero-immersive .p-search:focus-within .p-search-icon,
.p-hero.p-hero-immersive .p-search:focus-within .p-search-clear { color: var(--p-text-muted); }
.p-hero.p-hero-immersive .p-search:focus-within input::placeholder { color: var(--p-text-muted); }
.p-hero.p-hero-immersive .p-search:focus-within .p-search-go { background: var(--p-brand); color: #fff; }
html[data-theme="dark"] .p-hero.p-hero-immersive .p-search:focus-within { background: rgba(28, 28, 32, 0.96); }
/* The scene settles as the page opens: a slow, barely-there drift into place. */
@media (prefers-reduced-motion: no-preference) {
    .p-hero.p-hero-immersive img.p-hero-media { animation: p-hero-settle 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes p-hero-settle { from { transform: scale(1.06); opacity: 0.6; } }
/* A film can always be stopped: one quiet glass control at the stage's corner
   (any hero that plays one, framed or immersive). */
.p-hero-motion {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.p-hero-motion[hidden] { display: none; }
.p-hero-motion:hover { background: rgba(0, 0, 0, 0.5); transform: scale(1.05); }
.p-hero-motion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.p-hero-motion svg { width: 14px; height: 14px; }
.p-hero-motion .p-hero-motion-play { display: none; }
.p-hero-motion.is-paused .p-hero-motion-pause { display: none; }
.p-hero-motion.is-paused .p-hero-motion-play { display: block; }
/* On the immersive stage the control stands in the top corner, clear of the words and the search at every width. */
.p-hero.p-hero-immersive .p-hero-motion { right: var(--p-hero-gutter); top: clamp(16px, 3svh, 28px); bottom: auto; }
@media (max-width: 720px) {
    .p-hero.p-hero-immersive:not(.p-hero-compact) { min-height: clamp(380px, 66svh, 620px); padding-top: 56px; padding-bottom: 36px; }
    .p-hero.p-hero-immersive:not(.p-hero-compact) > .p-search { max-width: none; }
}

/* ── New arrivals (#644, the "latest" block): the shelf's head, its door to all of them, the grid's own cards ── */
.p-latest .p-grid { padding-top: 18px; }
.p-latest-all {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    font-size: 14px; font-weight: 550; color: var(--p-brand); text-decoration: none;
}
.p-latest-all svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.p-latest-all:hover svg { transform: translateX(2px); }
.p-latest-all:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 3px; border-radius: 4px; }
#p-results { scroll-margin-top: 84px; }