/* acworks.css — additions for the works catalogue.
   Loads alongside acstyle.css; changes nothing site-wide.
   Voice: Cormorant Garamond display, Work Sans utility,
   steelblue links, hairline lightgray rules, restraint. */

/* ---------- shared ---------- */

body.works-index,
body.work {
    margin-top: 6%;
}

/* Only the top margin. The width and side margins are acstyle.css's job at
   every breakpoint — restating them here was more specific than `body`, so it
   silently overrode the 420px rule and catalogue pages stayed at 88%/6% on a
   small phone instead of widening to 92%/4%. */
@media (max-width: 760px) {
    body.works-index,
    body.work {
        margin-top: 12%;
    }
}

a:focus-visible {
    outline: 1px solid steelblue;
    outline-offset: 0.2em;
}

.crumb {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.85em;
    color: #767676;
}

/* Apparatus text: small, grey, Work Sans. One base rule, because .meta was
   scoped to two parents and the film-credit roles matched neither — they
   claimed the class and rendered as plain body text. */
.meta {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.85em;
    color: #767676;
}

/* ---------- catalogue record (work page) ---------- */
/* The work's particulars set as a catalogue entry:
   small-caps labels, hairline rules — the archive made visible. */

dl.record {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    border-top: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    padding: 0.8em 0;
    margin: 1.5em 0;
}

dl.record div {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: 0 1em;
    padding: 0.18em 0;
}

dl.record dt {
    font-size: 0.78em;
    color: #767676;
    padding-top: 0.25em;
}

dl.record dd {
    margin: 0;
}

@media (max-width: 540px) {
    dl.record div {
        grid-template-columns: 1fr;
    }
}

/* ---------- actions ---------- */

.score-actions {
    margin: 1.5em 0;
}

.score-actions a {
    display: inline-block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.95em;
    border: solid 1px steelblue;
    padding: 0.45em 1.1em;
    margin: 0 0.6em 0.6em 0;
}

.score-actions a:hover {
    border-color: #767676;
}

.status-note,
.media-caption {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.95em;
    color: #767676;
    font-style: italic;
}

/* ---------- media ---------- */

.embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1em 0;
}

.embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- reviews & listings ---------- */

blockquote.review {
    margin: 1.2em 0;
    padding: 0;
    font-style: italic;
}

/* A work title inside a quotation. The whole quote is set in italic, so a
   title marked _like this_ in site.json would otherwise be italic inside
   italic and vanish — which is exactly what had happened to Robert Beale on
   Of a rose synge we. Nested emphasis reverts to upright, as it does in any
   properly set book. */
blockquote.review i i {
    font-style: normal;
}

blockquote.review footer {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 0.85em;
    color: #767676;
    margin-top: 0.3em;
}

ul.plain {
    list-style: none;
    padding: 0;
    margin: 0.5em 0;
}

ul.plain li {
    margin: 0.35em 0;
}

/* ---------- news ----------
   The date sits above its item, small and grey, as the record-card labels do.
   Generated into index.html between the NEWS markers; see build.py. */

.news-item {
    margin: 1.4em 0 0 0;
}

.news-item h3 {
    margin: 0 0 0.1em 0;
}

.news-item .meta {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.8em;
    color: #767676;
    margin-bottom: 0.5em;
}

.news-item p {
    margin: 0 0 0.7em 0;
}

.news-item p:last-child {
    margin-bottom: 0;
}

/* ---------- works index ---------- */

.work-row {
    margin: 0.9em 0;
}

.work-row .meta {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.85em;
    color: #767676;
}

.related {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.95em;
    margin: 1em 0;
}

p.ask {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.95em;
    margin: 1.2em 0;
}

/* One line of explanation under a category heading, where the group needs
   it. Same grey and weight as the per-work meta, so it reads as apparatus
   rather than as prose. */
.work-group p.group-note {
    color: #767676;
    font-size: 0.85em;
    margin: -0.2em 0 0.9em 0;
}

.news-item .news-links {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.85em;
    margin: 0.6em 0 0 0;
}

/* ---------- portrait ----------
   Embedded in the biography, not parked above it. On a wide screen it floats
   right so the text wraps: the reading edge stays hard left, as everywhere on
   the site, and the portrait faces into the page. The top margin (1em of the
   inherited 1.2em text size) sets its top level with the first line of prose,
   so the section's hairline rule stays the section's, not the picture's.
   On narrow screens the float is dropped — wrapping needs room to breathe —
   and the portrait stands above the text at a width that leaves the opening
   words on the first screen. */

.portrait {
    float: right;
    width: 38%;
    margin: 1em 0 1em 1.8em;
}

@media (max-width: 760px) {
    .portrait {
        float: none;
        width: 100%;
        margin: 1em 0 0.4em 0;
    }
}

/* ---------- performances map ----------
   A drawn SVG, not a mapping library: no script, no tiles, no third-party
   request. Hairline coast in the same lightgray as every rule on the site;
   marks in steelblue like every other link. See mapgen.py. */

.perfmap {
    width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.perfmap .coast {
    fill: none;
    stroke: lightgray;
    stroke-width: 0.7;
    stroke-linejoin: round;
}

.perfmap .pin {
    fill: steelblue;
    fill-opacity: 0.75;
}

.perfmap a:hover .pin,
.perfmap .pin:hover {
    fill-opacity: 1;
}

.perfmap .pinlabel {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 9px;
    fill: #767676;
}

.perfmap .leader {
    stroke: #767676;
    stroke-width: 0.4;
}

/* Self-hosted audio. The native control is deliberately left alone: it is the
   one thing on the page a visitor already knows how to use, and restyling it
   would be decoration for its own sake. It only needs room and a full width on
   a phone. `color-scheme: only light` in acstyle.css keeps it light. */
.audio-player {
    margin: 1.5em 0;}

.audio-player audio {
    width: 100%;
    max-width: 32em;
    display: block;}

/* The list under a work's own map. The map needs a mouse to interrogate and
   the audience is largely on phones, so the same performances are written out
   underneath. Same row treatment as the catalogue index, minus the link. */
.perf-list {
    margin-top: 1.2em;}

/* The gazetteer under the map. Each place carries the id its mark links to,
   so choosing a mark lands here — and :target marks where you arrived, which
   matters because a fragment jump on a long page is otherwise silent.

   This lives in the stylesheet and not in a style attribute on purpose:
   .htaccess sends `style-src 'self'` with no 'unsafe-inline', so an inline
   style would work perfectly in local preview and be dropped on the live
   site. That is the worst kind of bug — one that only appears after deploy. */
.place {
    margin: 1.6em 0;
    scroll-margin-top: 1em;}

.place h4 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #767676;
    margin: 0 0 0.3em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid lightgray;}

.place:target h4 {
    color: steelblue;
    border-bottom-color: steelblue;}

/* A mark is a link, so it takes the same hover as any other, and a visible
   focus ring — it is reachable by keyboard now that the svg is not role=img. */
.perfmap a:focus-visible .pin {
    stroke: steelblue;
    stroke-width: 2;
    fill-opacity: 1;}

/* Hit area for the work lists — the catalogue index, the collection, the
   gazetteer under the map. The links rendered 21px tall against WCAG 2.2's
   24px minimum target, on a site whose audience is "often on phones" and
   whose catalogue is navigated almost entirely by tapping these rows.

   Padding on an INLINE element enlarges the painted and hit region without
   touching the line box, so nothing moves and long titles wrap exactly as
   before. The rows already sit 16px apart, so the enlarged targets do not
   meet each other. */
.work-row a {
    padding-block: 3px;}

/* The enlarged tap area behind each mark. fill:transparent, NOT fill:none —
   `none` paints nothing AND receives no pointer events, so the target would
   look right in the markup and do nothing under a thumb. Sized per mark in
   mapgen so no mark's target can reach a neighbouring dot. */
.perfmap .hit {
    fill: transparent;}

/* The place name beside a mark is a second, far larger target than the dot,
   and on a phone it is usually the one a thumb finds. */
.perfmap a:hover .pinlabel,
.perfmap a:focus-visible .pinlabel {
    fill: steelblue;}

/* Leader lines are decoration and must never take a pointer. They are drawn
   after the marks, so without this they sit on top of them: measured at a
   375px viewport, four marks had their centre intercepted by a leader line
   and could not be tapped at all. */
.perfmap .leader {
    pointer-events: none;}