/* Shared by /work and /work/doubleword.
   Deliberately plain: the homepage's own styles stay in its <head> and are
   untouched, so a design pass here cannot break the front door. The palette
   and the bold-is-brightness rule are copied from index.html rather than
   shared, because there is nothing else to share yet. */

:root {
  --bright: #ffffff;
  --dim: #9a9a9a;
  --faint: #4a4a4a;
  --rule: #1e1e1e;
}

html, body { margin: 0; background: #000; }

body {
  color: var(--dim);
  font-family: "VT323", monospace;
  /* VT323 carries an fi ligature, which sets two cells in one and knocks
     "films" off the grid. Same reason as the homepage. */
  font-variant-ligatures: none;
  font-size: 21px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60ch; margin: 0 auto; padding: 7vh 6vw 14vh; }
.wrap.wide { max-width: 82ch; }

a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--faint); }
a:hover, a:focus-visible { color: var(--bright); border-bottom-color: var(--bright); outline: none; }

/* VT323 ships one weight, so emphasis is brightness plus a hairline stroke.
   font-weight: bold would only get a synthetic smear. */
.bright { color: var(--bright); -webkit-text-stroke: 0.022em currentColor; }

h1 { font-size: clamp(28px, 6vw, 54px); font-weight: normal; margin: 0 0 0.2em;
     color: var(--bright); -webkit-text-stroke: 0.022em currentColor; }
h2 { font-size: clamp(20px, 3vw, 28px); font-weight: normal; margin: 2.4em 0 0.6em;
     color: var(--bright); }
p { margin: 0 0 1em; }

.crumb { font-size: 17px; letter-spacing: 0.08em; margin: 0 0 3.5em; color: var(--faint); }
.crumb a { border-bottom: none; color: var(--faint); }
.crumb a:hover { color: var(--bright); }

.standfirst { font-size: clamp(18px, 2.6vw, 25px); margin: 0 0 2.4em; }

/* The work index. One row per piece, the metadata on the right where it can
   be scanned down the column rather than read line by line. */
.pieces { list-style: none; margin: 2.2em 0 0; padding: 0; }
.piece { border-top: 1px solid var(--rule); padding: 1.1em 0; }
.piece:last-child { border-bottom: 1px solid var(--rule); }
.piece .row { display: flex; gap: 1.5em; align-items: baseline;
              justify-content: space-between; flex-wrap: wrap; }
.piece .title { font-size: clamp(20px, 3vw, 30px); color: var(--bright); }
.piece a.title { border-bottom: none; }
.piece a.title:hover { border-bottom: none; text-decoration: underline; }
.piece .meta { color: var(--faint); font-size: 17px; letter-spacing: 0.04em;
               white-space: nowrap; }
.piece .roles { color: var(--dim); font-size: 18px; margin-top: 0.15em; }
.piece .note { color: var(--faint); font-size: 17px; margin-top: 0.35em; }

/* Only Doubleword carries a still. It sits above the row rather than beside
   it so the entry keeps the same left edge as the text-only ones and the list
   still scans as one column. */
.piece.has-still { padding-top: 1.6em; }
.piece a.still { display: block; border-bottom: none; margin-bottom: 0.9em; }
.piece a.still img { display: block; width: 100%; height: auto;
                     transition: opacity 140ms linear; }
.piece a.still:hover img, .piece a.still:focus-visible img { opacity: 0.82; }

/* Facts table. Two columns, label dim, value bright, no rules: at this size
   a border grid reads heavier than the type it is holding. */
.facts { margin: 0 0 2em; }
.facts div { display: flex; gap: 1.2em; padding: 0.18em 0; }
.facts dt { flex: 0 0 14ch; color: var(--faint); margin: 0; }
.facts dd { margin: 0; color: var(--dim); }

/* Credits. Same shape as .facts but the role is the label. */
.credits { margin: 0 0 2.2em; }
.credits div { display: flex; gap: 1.2em; padding: 0.22em 0; align-items: baseline; }
.credits dt { flex: 0 0 22ch; color: var(--faint); margin: 0; }
.credits dd { margin: 0; color: var(--bright); }

figure { margin: 2.2em 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { color: var(--faint); font-size: 16px; margin-top: 0.5em; }

/* Stills, one frame at a time. The row is a native scroll-snap strip, so a
   swipe or a trackpad works without the script; the script only drives the
   buttons and the counter underneath. Same frame as the film above it. */
.slideshow { margin: 2.2em 0; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
          overscroll-behavior-x: contain; scrollbar-width: none;
          aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--rule); }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 1px solid var(--dim); outline-offset: 2px; }
.slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
              display: block; scroll-snap-align: start; scroll-snap-stop: always; }

.slide-nav { display: flex; align-items: center; justify-content: space-between;
             margin-top: 0.5em; }
.slide-nav .count { color: var(--faint); font-size: 17px; letter-spacing: 0.08em; }
.slide-nav button { font: inherit; font-size: 24px; line-height: 1; color: var(--dim);
                    background: none; border: 1px solid var(--faint);
                    padding: 0.15em 0.9em; cursor: pointer;
                    transition: background-color 120ms linear, color 120ms linear,
                                border-color 120ms linear; }
.slide-nav button:hover, .slide-nav button:focus-visible {
  background: var(--bright); color: #000; border-color: var(--bright); outline: none; }

/* The film. aspect-ratio rather than the old padding-top trick, so the box is
   the right shape before the iframe loads and the page does not jump. */
.film { margin: 2.4em 0; aspect-ratio: 16 / 9; background: #000;
        border: 1px solid var(--rule); }
.film iframe { display: block; width: 100%; height: 100%; border: 0; }

.callout { border-left: 2px solid var(--faint); padding: 0.2em 0 0.2em 1.2em;
           margin: 2em 0; color: var(--dim); }

.cta { display: inline-block; color: var(--dim); text-decoration: none;
       font-size: clamp(15px, 2.4vw, 22px); border: 1px solid var(--faint);
       padding: 0.35em 1.4em; margin-top: 0.6em;
       transition: background-color 120ms linear, color 120ms linear,
                   border-color 120ms linear; }
.cta:hover, .cta:focus-visible { background: var(--bright); color: #000;
                                 border-color: var(--bright); outline: none; }

footer { margin-top: 5em; padding-top: 1.4em; border-top: 1px solid var(--rule);
         color: var(--faint); font-size: 17px; }
footer a { color: var(--faint); }