/* Character, faction, location and artefact dossier layouts
 *
 * These styles deliberately sit in their own file so archive records can
 * evolve without turning the core Ashes palette/layout stylesheet into a
 * dumping ground.
 *
 * Character records pair a portrait with a record card in a two-column grid.
 * Faction and location records reuse the same card language but usually carry
 * no portrait, so those dossiers collapse to a single column. Add the
 * `--with-portrait` modifier where artwork exists.
 */

body.character-record #body-wrapper > .container > .content-item,
body.faction-record #body-wrapper > .container > .content-item,
body.location-record #body-wrapper > .container > .content-item,
body.artefact-record #body-wrapper > .container > .content-item,
#body-wrapper > .container > .content-item:has(.character-dossier),
#body-wrapper > .container > .content-item:has(.faction-dossier),
#body-wrapper > .container > .content-item:has(.location-dossier),
#body-wrapper > .container > .content-item:has(.artefact-dossier) {
    max-width: 1180px;
}

.character-dossier,
.faction-dossier,
.location-dossier,
.artefact-dossier {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(300px, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin: 2.25rem 0 3.25rem;
    padding: 1.1rem;
    border: 1px solid var(--q2-border-ring);
    background:
        linear-gradient(135deg, rgba(184, 90, 56, 0.055), transparent 34%),
        color-mix(in srgb, var(--q2-bg-muted) 54%, transparent);
    box-shadow: inset 0 1px rgba(255,255,255,0.018);
}

/* No portrait column on faction records, or on character records whose
   portrait has not yet been filed. Drop the modifier and add a
   .character-portrait block once an image exists. */
.faction-dossier,
.location-dossier,
.artefact-dossier,
.character-dossier--no-portrait {
    grid-template-columns: minmax(0, 1fr);
}

.character-dossier--no-portrait .character-record-card dl {
    max-width: 46rem;
}

/* A faction record that does have filed artwork takes the portrait column
   back, matching the character dossier layout. */
.faction-dossier--with-portrait,
.location-dossier--with-portrait,
.artefact-dossier--with-portrait {
    grid-template-columns: minmax(260px, 420px) minmax(300px, 1fr);
}

.faction-dossier--with-portrait .faction-record-card dl,
.location-dossier--with-portrait .location-record-card dl,
.artefact-dossier--with-portrait .artefact-record-card dl {
    max-width: none;
}

.character-portrait {
    position: relative;
    min-width: 0;
}

.character-portrait::before {
    content: "VISUAL RECORD // FILED";
    position: absolute;
    z-index: 2;
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.35rem 0.52rem 0.3rem;
    background: rgba(15, 16, 14, 0.86);
    border: 1px solid rgba(216, 201, 169, 0.24);
    color: #ddd3bd;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.content-item .character-portrait img {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: 50% 42%;
    border: 1px solid var(--q2-border-strong);
    outline: 5px solid color-mix(in srgb, var(--q2-bg-muted) 82%, transparent);
    box-shadow: 0 18px 45px rgba(0,0,0,0.32);
}

.character-record-card,
.faction-record-card,
.location-record-card,
.artefact-record-card {
    position: relative;
    min-width: 0;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    border: 1px solid var(--q2-border-strong);
    border-top: 4px solid var(--ashes-rust);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 5px),
        var(--q2-bg-elev);
}

.character-record-card::after,
.faction-record-card::after,
.location-record-card::after,
.artefact-record-card::after {
    content: "A//W";
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    color: color-mix(in srgb, var(--ashes-rust) 25%, transparent);
    font-family: var(--pico-font-family-monospace);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    pointer-events: none;
}

.record-kicker {
    margin-bottom: 0.8rem;
    color: var(--ashes-rust-bright);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.character-record-card h2,
.faction-record-card h2,
.location-record-card h2,
.artefact-record-card h2 {
    margin: 0 0 1.65rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--q2-divider);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.character-record-card h2::before,
.faction-record-card h2::before,
.location-record-card h2::before,
.artefact-record-card h2::before {
    display: none;
}

.character-record-card dl,
.faction-record-card dl,
.location-record-card dl,
.artefact-record-card dl {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.72fr) 1.4fr;
    gap: 0;
    margin: 0;
}

.character-record-card dt,
.character-record-card dd,
.faction-record-card dt,
.location-record-card dt,
.artefact-record-card dt,
.faction-record-card dd,
.location-record-card dd,
.artefact-record-card dd {
    margin: 0;
    padding: 0.76rem 0;
    border-bottom: 1px solid var(--q2-divider);
}

.character-record-card dt,
.faction-record-card dt,
.location-record-card dt,
.artefact-record-card dt {
    padding-right: 1rem;
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.character-record-card dd,
.faction-record-card dd,
.location-record-card dd,
.artefact-record-card dd {
    color: var(--q2-text-strong);
    font-weight: 600;
}

/* The faction card runs full width, so keep the field index from stretching
   into an unreadable two-column sprawl on wide screens. */
.faction-record-card dl,
.location-record-card dl,
.artefact-record-card dl {
    max-width: 46rem;
}

/* Contents listing for a collected artefact — tracks on a recording, plates in
   a poster set, documents in a bundle. Third column carries a cross-reference. */
.track-list {
    max-width: 46rem;
    margin: 1.75rem 0 2.25rem;
    padding: 0;
    list-style: none;
    counter-reset: track;
}

.content-item .track-list {
    max-width: 46rem;
}

.track-list li {
    counter-increment: track;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: baseline;
    margin: 0;
    padding: 0.68rem 0;
    border-bottom: 1px solid var(--q2-divider);
}

.track-list li::before {
    content: counter(track, decimal-leading-zero);
    color: var(--ashes-rust-bright);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.track-list .track-note {
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
}

@media (max-width: 620px) {
    .track-list li {
        grid-template-columns: 2.25rem minmax(0, 1fr);
    }

    .track-list .track-note {
        grid-column: 2;
        text-align: left;
    }
}

/* A filed photograph or document.
 *
 * Unlike a portrait this keeps its own proportions — the object is the record,
 * and cropping it to a uniform frame would throw away the part that matters
 * (a caption, a date, a hand-written note along the bottom).
 */
.archive-photo {
    max-width: 24rem;
    margin: 2rem 0 2.25rem;
    padding: 0;
}

/* Landscape plates — group photographs, documents, notices — need the full
   column rather than the portrait-sized default. */
.archive-photo--wide {
    max-width: 100%;
}

/* A set of plates filed together — a poster series, a bundle of notices.
   Mixed portrait and landscape sit side by side at their own proportions. */
.plate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    margin: 2.25rem 0 2.75rem;
}

.content-item .plate-grid {
    max-width: none;
}

.plate-grid .archive-photo {
    max-width: none;
    margin: 0;
}

.plate-grid figcaption {
    margin-top: 0.85rem;
}

/* A filed object gets the plate treatment whether it is a photograph or a
   reel. This is the counterpart of the note on .event-media below: that class
   exists because an advert must not be dressed as a record, and the same
   logic run the other way says a film the archive found and is filing must
   not be dressed as an advert. Same chrome, one selector.

   height and background are here for the video only. A <video> has no
   intrinsic ratio to height:auto against once width is forced to 100%, and
   the black backing keeps a letterboxed or still-loading frame inside the
   border rather than showing the sheet through it. */
.content-item .archive-photo img,
.content-item .archive-photo video {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    background: #000;
    border: 1px solid var(--q2-border-strong);
    outline: 6px solid color-mix(in srgb, var(--q2-bg-muted) 82%, transparent);
    box-shadow: 0 18px 45px rgba(0,0,0,0.34);
}

.archive-photo figcaption {
    margin-top: 1.15rem;
    padding-left: 0.75rem;
    border-left: 3px solid color-mix(in srgb, var(--ashes-rust) 62%, transparent);
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.record-assessment {
    position: relative;
    z-index: 1;
    margin-top: 1.65rem;
    max-width: 30rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--ashes-amber);
    background: color-mix(in srgb, var(--q2-bg-muted) 72%, transparent);
    color: var(--q2-text);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.76rem;
    line-height: 1.55;
    letter-spacing: 0.03em;
}

.record-motto {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin-top: 1.35rem;
    padding: 0.42rem 0.62rem 0.36rem;
    border: 2px solid color-mix(in srgb, var(--ashes-rust) 76%, transparent);
    color: var(--ashes-rust-bright);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-0.7deg);
}

/* Dissolved factions
 *
 * A defunct record stays legible rather than being greyed into uselessness:
 * the archive still holds it, it is simply closed. The rust accent gives way
 * to a dead olive, and the card carries a struck-through status stamp.
 */
.faction-dossier--defunct,
.location-dossier--defunct,
.artefact-dossier--defunct {
    background:
        repeating-linear-gradient(135deg,
            rgba(120, 124, 102, 0.05) 0 12px, transparent 12px 24px),
        color-mix(in srgb, var(--q2-bg-muted) 40%, transparent);
}

.faction-dossier--defunct .faction-record-card,
.location-dossier--defunct .location-record-card,
.artefact-dossier--defunct .artefact-record-card {
    border-top-color: var(--ashes-olive);
}

.faction-dossier--defunct .faction-record-card::after,
.location-dossier--defunct .location-record-card::after,
.artefact-dossier--defunct .artefact-record-card::after {
    color: color-mix(in srgb, var(--ashes-olive) 28%, transparent);
}

.faction-dossier--defunct .record-kicker,
.location-dossier--defunct .record-kicker,
.artefact-dossier--defunct .record-kicker {
    color: var(--ashes-olive);
}

.record-stamp {
    display: block;
    width: fit-content;
    margin: 0 0 1.15rem;
    padding: 0.46rem 0.7rem 0.4rem;
    border: 2px solid color-mix(in srgb, var(--ashes-olive) 80%, transparent);
    color: color-mix(in srgb, var(--ashes-olive) 92%, var(--q2-text-strong));
    font-family: var(--pico-font-family-monospace);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: rotate(-1.4deg);
}

.faction-dossier--defunct .record-motto,
.location-dossier--defunct .record-motto,
.artefact-dossier--defunct .record-motto {
    border-color: color-mix(in srgb, var(--ashes-olive) 70%, transparent);
    color: color-mix(in srgb, var(--ashes-olive) 96%, var(--q2-text-strong));
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.faction-dossier--defunct .record-assessment,
.location-dossier--defunct .record-assessment,
.artefact-dossier--defunct .record-assessment {
    border-left-color: var(--ashes-olive);
}

/* Faction index cards on the Factions landing page. */
.faction-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.15rem;
    margin: 2.25rem 0 3rem;
    padding: 0;
    list-style: none;
}

.content-item .faction-index {
    max-width: none;
}

.faction-index li {
    margin: 0;
    padding: 1.15rem 1.25rem 1.3rem;
    border: 1px solid var(--q2-border-strong);
    border-top: 4px solid var(--ashes-rust);
    background: var(--q2-bg-elev);
}

.faction-index li.is-defunct {
    border-top-color: var(--ashes-olive);
    background: color-mix(in srgb, var(--q2-bg-elev) 70%, transparent);
}

.faction-index .faction-index-status {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--ashes-rust-bright);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.faction-index li.is-defunct .faction-index-status {
    color: var(--ashes-olive);
}

.faction-index h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.faction-index h3::before {
    display: none;
}

.faction-index p {
    margin: 0;
    color: var(--q2-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Return link
 *
 * Individual records are hidden from the navigation so the dropdowns stay
 * usable, which leaves no way back up a level except the browser button.
 * Every record opens with a breadcrumb to whatever contains it.
 */
.record-return {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.15rem;
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 0;
}

.record-return::before {
    content: "\2190";                       /* ← */
    font-size: 0.85rem;
    line-height: 1;
}

.record-return:hover,
.record-return:focus-visible {
    color: var(--ashes-rust-bright);
    text-decoration: none;
}

.content-item .record-return {
    max-width: none;
}

/* Event pages
 *
 * Practical, out-of-world player information. Deliberately plainer than an
 * archive record — no watermark, no assessment, no motto — so the two are
 * never mistaken for each other. Same palette, different register.
 */
/* The panel shape both of these are: hairline box, rust edge, lifted ground.
   .event-notice is the same shape in amber and overrides all three below. */
.event-key,
.event-book {
    border: 1px solid var(--q2-border-strong);
    border-left: 4px solid var(--ashes-rust);
    background: var(--q2-bg-elev);
}

.event-key {
    display: grid;
    grid-template-columns: minmax(8rem, 0.6fr) 1.4fr;
    gap: 0;
    max-width: 36rem;
    margin: 1.75rem 0 2.5rem;
    padding: 1.15rem 1.35rem 0.4rem;
}

.event-key dt,
.event-key dd {
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--q2-divider);
}

.event-key dt {
    padding-right: 1rem;
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.event-key dd {
    color: var(--q2-text-strong);
    font-weight: 600;
}

.event-key dt:nth-last-of-type(1),
.event-key dd:nth-last-of-type(1) {
    border-bottom: 0;
}

/* Something a player must not skim past. */
.event-notice {
    margin: 1.75rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--ashes-amber) 45%, transparent);
    border-left: 4px solid var(--ashes-amber);
    background: color-mix(in srgb, var(--q2-bg-muted) 60%, transparent);
}

/* Both panels hold prose, and neither wants its first and last paragraph
   pushing off the padding. */
.content-item .event-notice > :first-child,
.content-item .event-book > :first-child { margin-top: 0; }
.content-item .event-notice > :last-child,
.content-item .event-book > :last-child  { margin-bottom: 0; }

.event-notice strong {
    color: var(--ashes-amber);
}

/* Booking. Out-of-world by definition, and the one thing on an event page a
   reader may have come for, so it is allowed to be louder than anything else
   in this section. Off-site link; it leaves the archive entirely. */
.event-book {
    margin: 2rem 0;
    padding: 1.35rem 1.5rem;
}

.event-book p {
    margin: 0 0 1rem;
    color: var(--q2-text-muted);
}

a.event-book-link {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--ashes-rust);
    background: var(--ashes-rust);
    color: #f4ece2;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

a.event-book-link:hover,
a.event-book-link:focus-visible {
    background: var(--ashes-rust-bright);
    border-color: var(--ashes-rust-bright);
    color: #fff;
    text-decoration: none;
}

/* Promotional material for an event: a trailer, a poster.
 *
 * Deliberately not .archive-photo. That class dresses an object the archive
 * found and is filing; this is an advert, and dressing it as a record would
 * put a Fallen Dragon poster inside the fourth wall. Same palette, no
 * dossier chrome, natural proportions.
 *
 * Constrained rather than full-bleed because both assets are portrait: at
 * content width a 2:3 frame is taller than the viewport and the reader loses
 * the page around it.
 */
.event-media {
    max-width: 26rem;
    margin: 2rem 0;
}

/* The site map is the one event asset a reader has to read rather than look
   at, and 26rem puts its labels under 8px. It is portrait as well, so the
   usual answer of going full-bleed only trades unreadable for taller than
   the viewport. 44rem sits inside the 1020px content column with room, and
   is the widest an 0.83 ratio goes before the compass leaves the fold. */
.event-media--map {
    max-width: 44rem;
}

/* Even at 44rem the map is legible rather than readable, so it opens at its
   native 1708px in a new tab. A plain anchor, deliberately: the page carries
   no JavaScript and the browser's own image viewer pans and zooms better
   than a lightbox written here would. Direct child only, so the fallback
   download link inside a <video> and any link in a caption keep their own
   styling. */
.event-media--map > a {
    display: block;
    text-decoration: none;
}

.event-media--map > a:hover img,
.event-media--map > a:focus-visible img {
    border-color: var(--ashes-rust-bright);
}

/* Trailer and poster shown together near the top of an event page. Both are
   portrait, so two columns of roughly 16rem sit side by side without either
   running past the fold; below that the pair would squeeze the video's own
   controls, so it stacks instead. */
.event-media-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
    max-width: 34rem;
    margin: 2rem 0;
}

.event-media-pair .event-media {
    max-width: none;
    margin: 0;
}

/* The trailer is 2:3 and the poster is not, so sizing each from its own
   proportions gave two frames of different heights that would not line up
   however they were aligned. Both are pinned to the trailer's ratio and the
   poster letterboxes against the black backing it already ends in, which
   costs a few invisible pixels and buys a straight edge top and bottom. */
.event-media-pair video,
.event-media-pair img {
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

/* Only the stacking margin needs clearing now that chrome is opt-in; the
   border these want is declared with the video's, just above. */
.content-item .event-media img {
    margin: 0;
}

@media (max-width: 34rem) {
    .event-media-pair {
        grid-template-columns: 1fr;
        max-width: 20rem;
    }
}

.event-media video,
.event-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--q2-border-strong);
    background: #000;
}

.content-item .event-media figcaption {
    margin-top: 0.65rem;
    color: var(--q2-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.event-book-host {
    display: block;
    margin-top: 0.9rem;
    color: var(--q2-text-muted);
    font-size: 0.8rem;
}

/* Keep long narrative text readable while allowing dossier/landing elements
   to use the wider archive sheet. */
body.character-record .content-item > p,
body.character-record .content-item > ul,
body.character-record .content-item > ol,
body.character-record .content-item > blockquote,
body.character-record .content-item > h2,
body.character-record .content-item > h3,
body.faction-record .content-item > p,
body.location-record .content-item > p,
body.artefact-record .content-item > p,
body.faction-record .content-item > ul,
body.location-record .content-item > ul,
body.artefact-record .content-item > ul,
body.faction-record .content-item > ol,
body.location-record .content-item > ol,
body.artefact-record .content-item > ol,
body.faction-record .content-item > blockquote,
body.location-record .content-item > blockquote,
body.artefact-record .content-item > blockquote,
body.faction-record .content-item > h2,
body.location-record .content-item > h2,
body.artefact-record .content-item > h2,
body.faction-record .content-item > h3,
body.location-record .content-item > h3,
body.artefact-record .content-item > h3,
.content-item:has(.character-dossier) > p,
.content-item:has(.character-dossier) > ul,
.content-item:has(.character-dossier) > ol,
.content-item:has(.character-dossier) > blockquote,
.content-item:has(.character-dossier) > h2,
.content-item:has(.character-dossier) > h3,
.content-item:has(.faction-dossier) > p,
.content-item:has(.location-dossier) > p,
.content-item:has(.artefact-dossier) > p,
.content-item:has(.faction-dossier) > ul,
.content-item:has(.location-dossier) > ul,
.content-item:has(.artefact-dossier) > ul,
.content-item:has(.faction-dossier) > ol,
.content-item:has(.location-dossier) > ol,
.content-item:has(.artefact-dossier) > ol,
.content-item:has(.faction-dossier) > blockquote,
.content-item:has(.location-dossier) > blockquote,
.content-item:has(.artefact-dossier) > blockquote,
.content-item:has(.faction-dossier) > h2,
.content-item:has(.location-dossier) > h2,
.content-item:has(.artefact-dossier) > h2,
.content-item:has(.faction-dossier) > h3,
.content-item:has(.location-dossier) > h3,
.content-item:has(.artefact-dossier) > h3 {
    max-width: 820px;
}

body.character-record .content-item > h2,
body.faction-record .content-item > h2,
body.location-record .content-item > h2,
body.artefact-record .content-item > h2,
.content-item:has(.character-dossier) > h2,
.content-item:has(.faction-dossier) > h2,
.content-item:has(.location-dossier) > h2,
.content-item:has(.artefact-dossier) > h2 {
    margin-top: 2.6rem;
}

@media (max-width: 820px) {
    .character-dossier,
    .faction-dossier,
    .location-dossier,
    .artefact-dossier {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding: 0.8rem;
    }

    .character-portrait {
        max-width: 430px;
    }

    .character-record-card dl,
    .faction-record-card dl,
    .location-record-card dl,
    .artefact-record-card dl {
        grid-template-columns: 1fr;
    }

    .character-record-card dt,
    .faction-record-card dt,
    .location-record-card dt,
    .artefact-record-card dt {
        padding-bottom: 0.15rem;
        border-bottom: 0;
    }

    .character-record-card dd,
    .faction-record-card dd,
    .location-record-card dd,
    .artefact-record-card dd {
        padding-top: 0;
    }
}

/* -------------------------------------------------------------------------
 * Portrait sets
 *
 * A subject with more than one visual record on file. The frame belongs to
 * the strip rather than to each plate, so paging moves the image inside a
 * fixed mount rather than sliding a framed picture about.
 *
 * Scroll-snap rather than a scripted carousel: it swipes on a phone, drags
 * and wheels on a desktop, keeps working with CSS disabled, and needs no
 * JavaScript in a theme whose parent cannot be inspected from this repo.
 * ------------------------------------------------------------------------- */
.portrait-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    border: 1px solid var(--q2-border-strong);
    outline: 5px solid color-mix(in srgb, var(--q2-bg-muted) 82%, transparent);
    box-shadow: 0 18px 45px rgba(0,0,0,0.32);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ashes-rust) 70%, transparent) transparent;
}

/* The plates carry no frame of their own; the strip is the mount. */
.content-item .character-portrait--set .portrait-strip img {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: 50% 42%;
    /* Cancels .character-portrait img, which matches these too, not the base
       rule. It has to stay even though base chrome is now opt-in. */
    border: 0;
    outline: 0;
    box-shadow: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.portrait-strip::-webkit-scrollbar {
    height: 6px;
}

.portrait-strip::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ashes-rust) 70%, transparent);
}

/* Matches .archive-photo figcaption, so a portrait set reads as filed
   material rather than as a gallery widget. */
.portrait-strip-note {
    margin: 1rem 0 0;
    padding-left: 0.75rem;
    border-left: 3px solid color-mix(in srgb, var(--ashes-rust) 62%, transparent);
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
    .portrait-strip {
        scroll-behavior: smooth;
    }
}