@charset "UTF-8";
/* ==========================================================================
   FILMS FOR THE FEMINIST CLASSROOM — ffc.css
   The stylesheet for the whole site: every live page loads this one file and
   nothing else. (`ffcmain_forarchives.css` still serves 29 pages in the
   *_archive folders, which are deliberately left in their original form.)

   START HERE IF YOU ARE NEW. The reasoning behind the decisions in this file
   — including several that look odd until you know what they are avoiding —
   is written down in `_notes/HANDOFF.md`, next to the scripts that made the
   changes. `_notes` is excluded from the web server on purpose, so it will be
   in the Dropbox folder but never on ffc.twu.edu.

   Reading order of this file is the cascade:
      LAYER 1   Tokens .......... fonts, palette, scale, layout dimensions
      LAYER 2   Reset + base .... element defaults, no layout
      LAYER 3   Page frame ...... header / nav / content / aside / footer
      LAYER 4   Page type: TOC .......... body.page-toc
      LAYER 4b  Page type: article ...... body.page-article
                (essays, reviews, lesson plans, interviews, festival
                 reports — one type with variants, not five types)
      LAYER 4d  Page type: site .......... body.page-site
      LAYER 5   Narrow screens .. the one breakpoint, at 820px
      LAYER 6   Print .......... the article as an offprint
      (a new page type adds a sibling 4x layer — nothing above it changes)
   ========================================================================== */


/* ==========================================================================
   LAYER 1 · TOKENS
   Change the site's look from here. Nothing below hard-codes a value.
   ========================================================================== */
:root {

  /* --- Brand palette (unchanged from the original comment block) --------- */
  --color-maroon:       #663333;   /* #633 */
  --color-blue:         #3399cc;   /* #39C — the brand blue. Nothing sets text
                                      in it: at 3.2:1 it fails AA below 18px.
                                      Rules and large type only; for text use
                                      --color-accent-text, which is this hue
                                      darkened to 4.5:1. */
  --color-blue-light:   #99ccff;   /* #9CF */
  --color-blue-pale:    #eef6fc;   /* new — hover wash only */
  --color-gray-40:      #666666;
  --color-gray-80:      #cccccc;
  --color-white:        #ffffff;

  /* --- Semantic colors — what the palette is FOR ------------------------- */
  --color-text:         var(--color-maroon);
  --color-text-muted:   var(--color-gray-40);
  --color-heading:      var(--color-maroon);
  --color-subheading:   var(--color-gray-40);
  --color-rule:         var(--color-blue-light);
  --color-accent-text:  #2e7ea8;                /* 4.5:1 — the blue to use for
                                                   any text below 18px */
  --color-link:         var(--color-maroon);
  --color-hover-bg:     var(--color-blue-pale);
  --color-page-bg:      var(--color-white);
  --color-surround-bg:  var(--color-white);   /* was --color-gray-60 (#999).
                                       The page is 799px wide and everything
                                       outside it used to be mid-grey, which
                                       framed the page but read as heavy on a
                                       wide screen. White throughout now; the
                                       blue strip behind the nav is still what
                                       marks the left edge. */

  /* --- Typography -------------------------------------------------------- */
  --font-body:          Verdana, Geneva, Helvetica, Arial, sans-serif;
  --font-heading:       var(--font-body);

  --text-base:          14px;   /* was an effective 12.8px */
  --text-xs:            0.78em;
  --text-sm:            0.88em;
  --text-md:            1em;
  --text-lg:            1.15em;
  --text-xl:            1.35em;

  /* Not a design value: below 16px iOS Safari zooms the whole page in when a
     form field takes focus. It is a browser threshold, so it is a fixed px. */
  --input-min-size:     16px;

  --leading-body:       1.55;
  --leading-tight:      1.3;
  --tracking-label:     0.08em;
  --ellipsis-gap:       0.12em;  /* space between the dots of an ellipsis */

  /* --- Spacing scale ----------------------------------------------------- */
  --space-2xs:          0.25rem;
  --space-xs:           0.5rem;
  --space-sm:           0.75rem;
  --space-md:           1rem;
  --space-lg:           1.5rem;
  --space-xl:           2.5rem;
  --space-2xl:          3.5rem;

  /* --- Layout dimensions --------------------------------------------------
     ONE column, defined once. The masthead, the content and the footer are
     three parts of the same column, so they all take these four values.
     Before this pass each had its own: the masthead began 14px left of the
     text and the footer 36px left of it, on every page. --col-width is the
     500px measure plus the two paddings, because everything is border-box. */
  --page-width:         799px;
  --nav-width:          200px;
  --col-left:           214px;  /* = --page-width − --col-width */
  --col-width:          585px;  /* = 32 + 500 of text + 53 */
  --col-pad-left:       32px;
  --col-pad-right:      53px;

  --masthead-pad-y:     32px;
  --footer-pad-top:     6em;
  --nav-top:            50px;   /* both rails are fixed to the viewport, so */
  --nav-bottom:         259px;  /* measured: where the navigation actually
                                   ends. Re-measure if the nav gains an item
                                   or the search box changes height -- the
                                   rail below is derived from it.            */
  --rail-top:           calc(var(--nav-bottom) + var(--space-xl));
  --rail-img-width:     180px;
  --nav-sticky-height:  103px;  /* the narrow-width nav band, measured at
                                   360-430px; only LAYER 5 uses it */

  /* --- TOC-specific dimensions ------------------------------------------- */
  --toc-reviewer-col:   10rem;   /* right-hand reviewer column */
  --toc-col-gap:        1.25rem;
  --toc-entry-pad:      0.7rem;
}


/* ==========================================================================
   LAYER 2 · RESET + BASE
   Element defaults only. No layout, no page-type knowledge.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, div, section, article, aside, header, hgroup, footer, nav, main,
h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img,
ol, ul, li, figure, figcaption, cite, canvas, video, table, th, td, tr {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  color: inherit;
}

html {
  background: var(--color-surround-bg);
  font-family: var(--font-body);
  font-size: 100%;
  /* A permanent scrollbar gutter, so a short page and a long one do not shift
     the centred layout sideways by a scrollbar's width. This used to be
     `overflow-y: scroll` on BODY, paired with `overflow-x: hidden` — and that
     pairing silently broke `position: sticky` for everything inside the page,
     which is why the A-Z bar on the index pages would not stay put in Safari.
     Horizontal overflow is measured at 0 at every breakpoint now, so nothing
     needs hiding. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  width: var(--page-width);
  min-height: 100vh;   /* the two rails are fixed at --nav-top and --rail-top,
                          but the white page and the blue strip are painted by
                          the body. Without this, a short page (contact, a stub
                          TOC) ends above the image rail and leaves it hanging
                          off the end of the page. */
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-page-bg);
  background-image: url(../_images/background-blue-200px.png);
  background-repeat: repeat-y;
}

p       { margin-bottom: var(--space-md); }
strong  { font-weight: bold; }
em      { font-style: italic; }
img     { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-link);
  text-decoration: none;
}

ul, ol  { margin-left: 2em; }

/* Heading defaults. Page types override these — that is the point. */
h1 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: bold; color: var(--color-heading); line-height: var(--leading-tight); }
h2 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: bold; color: var(--color-heading); line-height: var(--leading-tight); }
h3 { font-family: var(--font-heading); font-size: var(--text-md); font-weight: bold; color: var(--color-heading); line-height: var(--leading-tight); }
/* h4-h6 exist because demoting legacy headings pushes real subheads down a
   level. Without these they inherit body type and vanish as headings.
   Prominence has to fall monotonically: h3 was grey while h4 was maroon, so a
   child heading outranked its parent on screen. Maroon down to h3, muted
   below it, and the smallest two are set as labels rather than titles. */
h4 { font-family: var(--font-heading); font-size: var(--text-md); font-weight: bold; color: var(--color-subheading); line-height: var(--leading-tight); }
h5, h6 { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: bold; color: var(--color-subheading); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* Inline semantics used across every page type */
.filmTitle,
cite            { font-style: italic; }

/* Ellipsis. Three real periods, not the … glyph, because letter-spacing can
   space three characters and cannot reach inside one glyph -- so the gap
   between the dots is tunable from this single value. The negative margin
   cancels the trailing space letter-spacing adds after the last dot, and
   nowrap stops the three dots breaking across a line. */
.ellipsis {
  letter-spacing: var(--ellipsis-gap);
  margin-right: calc(-1 * var(--ellipsis-gap));
  white-space: nowrap;
}
.filmTitle em   { font-style: normal; }
.journalName    { font-style: italic; }
.authorName,
.interviewName  { font-weight: bold; }

/* --- Classes that intentionally carry NO rule -----------------------------
   An audit that lists "classes with no CSS rule" will surface these. They are
   semantic hooks, not omissions:
     .site-name          the masthead title, paired with .visually-hidden
     .site-page/.site-staff   page-kind hooks on <main>
     .art-body--qa/--game     body variants whose styling lives on .art-speaker
     .search-hit/-hits/-meta/-snip/-note   search results, built in the browser
                             by _search/ffc-search.js — they exist at runtime,
                             never in a file on disk
   Everything else appearing in such an audit is a real gap — that check is how
   .floatright, .firstpafterheading, .image-caption and .alphaList below were
   found missing after the rewrite. Run BOTH directions.

   No underline utility, deliberately: on the web an underline reads as "this
   is a link". The 78 <u> tags and 34 .underline spans that used to be here were
   replaced with the markup each was standing in for — headings, <strong> run-in
   labels, <em>, or nothing at all where a link was already underlining itself.
   If underlining reappears in a source file, that is a subhead asking to be a
   heading, not a style to add back. */

/* --- Utilities carried over from the retired stylesheet -------------------
   These classes are in the markup across the site; without rules they do
   nothing. .floatright in particular governs 22 figures. */
figure.floatright, .floatright {
  float: right;
  width: 40%;
  margin: 0.5em;
  padding: 0.5em;
  border: thin solid var(--color-gray-80);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: center;
  text-indent: 0;
}
p.firstpafterheading { margin-top: 0; }
.image-caption { font-size: var(--text-sm); }
ol.alphaList { list-style-type: lower-alpha; margin-left: 1.5em; }
/* Accessible hiding — replaces text-indent: -9000em */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   LAYER 3 · PAGE FRAME
   Shared by every page type. Keyed to #mainContent, not to <article>, so it
   works whether the container is <main>, <article> or <section>.
   ========================================================================== */

/* --- Masthead ----------------------------------------------------------- */
#pageHeader {
  margin-left: var(--col-left);
  width: var(--col-width);
  padding: var(--masthead-pad-y) var(--col-pad-right)
           var(--masthead-pad-y) var(--col-pad-left);
  background: var(--color-white);
}
#pageHeader img { position: relative; }

/* One line, two roles. On a TOC #issueID IS the page title, so it is the <h1>;
   on every other page type it is a link back up to that TOC, so it is a <p>.
   font-weight is pinned so the two look identical -- the masthead should not
   change shape as you move between an issue and an article inside it. */
#issueID {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: normal;
}

.issueInf p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Side navigation ---------------------------------------------------- */
nav#mainNavigation {
  position: fixed;
  top: var(--nav-top);
  width: var(--nav-width);
  padding: 10px 25px 10px 10px;   /* was unitless → whole rule was dropped */
  font-size: var(--text-sm);
  line-height: 2;
  text-align: right;
  color: var(--color-text);
}
nav#mainNavigation ul {
  margin: 0;
  padding: 0 3em 0 0;
  list-style: none;
}
nav#mainNavigation a:hover,
nav#mainNavigation a:focus-visible { text-decoration: underline; }

nav#mainNavigation table  { margin-top: var(--space-lg); border: 0; }
nav#mainNavigation form   { margin: 0.5em 30px 0 10px; }

/* --- Main content column ------------------------------------------------ */
#mainContent {
  float: right;
  width: var(--col-width);
  padding: 0 var(--col-pad-right) 0 var(--col-pad-left);
}
/* Underlines are decided per page type — a TOC entry is a link that wraps a
   whole row, and underlining all of it is noise. Prose page types add
   `text-decoration: underline` for links inside running text. */

/* --- Indexes ------------------------------------------------------------
   The browse pages: films, directors, contributors. Long alphabetical lists,
   so the letter headings and the A-Z jump bar carry most of the navigation.

   THESE FOUR PAGES ARE GENERATED. indexes.html, index_films.html,
   index_directors.html and index_authors.html are written by
   `_notes/scripts/build_indexes.py` from the credit blocks of the articles
   themselves. Editing them by hand achieves nothing — the next rebuild
   overwrites it. Change the script, or change the article it read from.

   The script also carries its OWN copy of the masthead, nav and footer. That
   has bitten once already: a nav label was corrected across all 489 pages and
   silently came back on these four at the next rebuild, because the template
   inside the script still had the old text. If you change the page frame,
   grep the scripts too. */
/* The A-Z sits in the page's own right margin — the ~52px of white between
   where the text stops and where the page ends, which nothing else uses. It
   was tried out in the grey surround beyond the page first and read as a
   browser extension stuck to the window rather than part of the site.
   Fixed, so it holds still at every scroll position. */
.page-site .index-az {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% + (var(--page-width) / 2) - 2.35rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin: 0;
  padding: var(--space-xs) 0.45rem;
  border-left: 1px solid var(--color-rule);
  background: var(--color-page-bg);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
}
.page-site .index-az a { font-weight: bold; }
.page-site .index-az a:hover,
.page-site .index-az a:focus-visible { background: var(--color-hover-bg); }
.page-site h2.index-letter {
  margin: var(--space-xl) 0 var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-lg);
  color: var(--color-heading);
}
/* The shape of one entry, and why it is indented:

       Girls Town                        .index-term   — what you looked up
       dir. Jim McKay (1996)             .index-meta   — enough to identify it
           Reviewed by Kimberly Lamm     .index-where  — where to go and read
           Issue 6.1, Spring 2015        .index-issue

   The term is the thing being indexed and sits flush left so the alphabet
   reads cleanly down the page; everything under it is an answer to "and
   where is that?", so it is indented and smaller. A film discussed in three
   articles gets three .index-where lines under one term. */
.page-site .index-list { margin: 0; padding: 0; list-style: none; }
.page-site .index-list > li { margin-bottom: var(--space-md); }
.page-site .index-term { font-weight: bold; }
.page-site .index-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.page-site .index-where {
  margin: var(--space-2xs) 0 0 1.4em;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.page-site .index-issue { color: var(--color-text-muted); }
/* indexes.html only — the landing page that introduces the three indexes and
   sends you to one. Deliberately not styled like the lists it links to: it is
   a short menu of three, not something to scan alphabetically. */
.page-site .index-hub { margin: 0; padding: 0; list-style: none; }
.page-site .index-hub > li {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.page-site .index-hub > li:last-child { border-bottom: 0; }
.page-site .index-hub a { font-size: var(--text-lg); font-weight: bold; }
.page-site .index-hub p { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); }

/* --- Site search --------------------------------------------------------
   The box in the nav, and the results on search.html. Replaces the FreeFind
   form that used to sit here; the index it queries is built by
   _notes/scripts/build_search_index.py and ships with the site. */
/* Two forms, doing two jobs. This one is in the nav on all 489 pages and is
   only a launcher: it submits to search.html and nothing happens in place.
   The .search-page-form below is the working form on search.html itself,
   which is why it is bigger and has room to breathe. */
nav#mainNavigation .site-search {
  display: flex;
  gap: var(--space-2xs);
  margin: var(--space-md) 0 0;
}
nav#mainNavigation .site-search input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 2px 4px;
  border: 1px solid var(--color-gray-80);
  background: var(--color-page-bg);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text);
}
nav#mainNavigation .site-search input:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 1px;
}
nav#mainNavigation .site-search button {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--color-gray-80);
  background: var(--color-page-bg);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text);
  cursor: pointer;
}
nav#mainNavigation .site-search button:hover { background: var(--color-hover-bg); }

.page-site .search-page-form { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.page-site .search-page-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-gray-80);
  font: inherit;
  color: var(--color-text);
}
.page-site .search-page-form button {
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-gray-80);
  background: var(--color-page-bg);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.page-site .search-page-form button:hover { background: var(--color-hover-bg); }

/* --- Search results -----------------------------------------------------
   EVERYTHING BELOW EXISTS ONLY AT RUNTIME. Grep the site for `search-hit` and
   you will find nothing: `_search/ffc-search.js` builds these elements in the
   browser after someone types a query. They are not missing and the rules are
   not dead — do not delete them because the markup cannot be found.
   (They are listed for the same reason in "Classes that intentionally carry
   NO rule" in LAYER 2.)

   One hit is: a bold title link, a muted line saying which issue it came
   from, and a snippet with the matched words wrapped in <mark>. The rule
   between hits is a top border rather than a bottom one, so the last hit does
   not end on a line with nothing under it. */
.search-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.search-hits { margin: 0; padding: 0; list-style: none; }
.search-hit  { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.search-hit:first-child { border-top: 0; }
.search-hit a { font-weight: bold; text-decoration: none; }
.search-hit a:hover, .search-hit a:focus-visible { text-decoration: underline; }
.search-hit p { margin: var(--space-2xs) 0 0; }
.search-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.search-snip { font-size: var(--text-sm); }
/* Unscoped on purpose: <mark> is the browser's own "this is the bit you were
   looking for" element, and the search script is the only thing on the site
   that emits it. A wash rather than the usual yellow, because a search page
   can be most of the way highlighted and yellow at that density is unreadable. */
mark { background: var(--color-blue-pale); color: inherit; font-weight: bold; }

/* --- Selected image rail ------------------------------------------------ */
/* The rail is fixed to the viewport, which is what makes it hold still while
   the article scrolls — and also what made anything past the fold permanently
   unreachable: a fixed element does not scroll with the page. Two pages carry
   three images and captions each (637px of rail), so on a 900px laptop the
   third image sat 237px below the window and could not be got at by any means.

   Giving the box a `bottom` as well as a `top` turns it into its own scroll
   container. For the 415 single-image rails nothing changes at all: the box is
   taller but the content still starts at the top, there is no background or
   border to see, and overflow-y: auto shows no scrollbar when nothing
   overflows. overscroll-behavior stops a flick at the end of the rail
   continuing into the article. */
#selectedImage {
  position: fixed;
  top: var(--rail-top);
  bottom: var(--space-md);
  width: var(--nav-width);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-80) transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
#selectedImage img {
  width: var(--rail-img-width);
  margin: 10px 0 0 10px;
  background: var(--color-white);
}
#selectedImage p {
  padding: 1em 21px;
  font-size: var(--text-xs);
}

/* --- Footer ------------------------------------------------------------- */
#pageFooter { clear: both; }
#pageFooter p {
  margin-left: var(--col-left);
  width: var(--col-width);
  padding: var(--footer-pad-top) var(--col-pad-right)
           var(--space-md) var(--col-pad-left);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
  text-align: left;
  clear: both;
}


/* ==========================================================================
   LAYER 4 · PAGE TYPE — TABLE OF CONTENTS  (body.page-toc)
   Everything below is scoped to the TOC. No other page type sees it.
   ========================================================================== */

/* --- Section rhythm ----------------------------------------------------- */
/* One rule replaces eight per-id `section#X { margin-top: 4em }` rules. */
.page-toc .toc-section + .toc-section { margin-top: var(--space-2xl); }

.page-toc .toc-section > h2 {
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--color-rule);
  color: var(--color-heading);
  font-size: var(--text-lg);
}

/* Section editor / standfirst line, e.g. "Edited by Anne Keefe" */
.page-toc .toc-section-note {
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Shared entry behaviour --------------------------------------------- */
/* The <a> IS the entry. No wrapper <section>, no nested unclassed <section>. */
.page-toc .toc-entry {
  display: block;
  padding: var(--toc-entry-pad) var(--space-xs);
  border-top: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
}
.page-toc .toc-entry:first-of-type { border-top: 0; }

.page-toc .toc-entry p { margin: 0; }

/* The hover state the site has never had. */
.page-toc .toc-entry:hover,
.page-toc .toc-entry:focus-visible {
  background: var(--color-hover-bg);
  outline: none;
}
.page-toc .toc-entry:hover .toc-title,
.page-toc .toc-entry:hover .toc-film,
.page-toc .toc-entry:focus-visible .toc-title,
.page-toc .toc-entry:focus-visible .toc-film { text-decoration: underline; }

/* --- Entry type A: title + byline ---------------------------------------- */
/* Essays, interviews, lesson plans, festival reports, editor's welcome.     */
/* Replaces .TOCliststyle, .featureDescription, .lessonPlanDescription.      */
.page-toc .toc-entry--feature .toc-title {
  font-size: var(--text-md);
}
.page-toc .toc-entry--feature .toc-byline {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Entry type B: films + reviewer -------------------------------------- */
/* Replaces .reviewDescription and .featureReviewDescription.               */
/* Two real columns. No floats, no nth-child parity.                        */
.page-toc .toc-colheads,
.page-toc .toc-entry--review {
  display: grid;
  grid-template-columns: 1fr var(--toc-reviewer-col);
  column-gap: var(--toc-col-gap);
  align-items: start;
}

.page-toc .toc-colheads {
  padding: 0 var(--space-xs) var(--space-2xs);
  border-bottom: 1px solid var(--color-rule);
}
.page-toc .toc-colheads h3 {
  font-size: var(--text-xs);
  font-weight: bold;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-subheading);
}
.page-toc .toc-colheads h3:last-child { text-align: right; }

.page-toc .toc-entry--review .toc-films   { grid-column: 1; }
.page-toc .toc-entry--review .toc-reviewer {
  grid-column: 2;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* The reviewer's name needs to say that it IS the reviewer's name. On a wide
   screen the FILMS | REVIEWERS column heads do that, so the label is hidden --
   but hidden-but-spoken, not `display: none`. Those heads are grid cells, not
   table headers, so nothing programmatically ties them to the names beneath;
   a screen reader on a desktop was reading two film credits and then a bare
   personal name. This is read aloud at every width. */
.page-toc .toc-reviewer-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Film title italic comes from the element, not from being an even child. */
.page-toc .toc-film   { font-style: italic; }
.page-toc .toc-credit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.page-toc .toc-film + .toc-credit  { margin-bottom: var(--space-sm); }
.page-toc .toc-films > :last-child { margin-bottom: 0; }

/* --- Nested special-feature reviews -------------------------------------- */
/* A reviews block sitting inside a special feature: same components, one    */
/* heading level down. Was a whole duplicate rule set.                       */
.page-toc .toc-subsection { margin-top: var(--space-xl); }
.page-toc .toc-subsection > h3 {
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-heading);
  font-size: var(--text-md);
}


/* ==========================================================================
   LAYER 4b · PAGE TYPE — ARTICLE  (body.page-article)

   Covers essays, features, lesson plans, interviews, festival reports and the
   one-offs — 160 pages that share ONE section vocabulary under fifteen
   different legacy names. The filename prefix does not determine the
   structure; which sections are present does.

   Roles:  art-title · art-films · art-byline · art-body · art-notes ·
           art-workscited · art-bio    (+ art-quote, and art-body--qa)
   ========================================================================== */

.page-article {
  --art-size:    var(--text-base);
  --art-leading: var(--leading-body);
  --art-para:    var(--space-md);
}

/* --- Section rhythm ------------------------------------------------------ */
.page-article #mainContent > section + section { margin-top: var(--space-xl); }

.page-article #mainContent > section > h2 {
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-heading);
  font-size: var(--text-md);
}

/* --- Title block --------------------------------------------------------- */
/* Unlike a review, an article carries its own visible title. */
.page-article .art-title { margin-bottom: 0; }
.page-article .art-title h1 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  text-wrap: balance;
}
.page-article .art-title p { margin-top: var(--space-2xs); margin-bottom: 0; }

/* Works discussed, where an article opens with citations. */
.page-article .art-films {
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-rule);
  font-weight: bold;
}
.page-article .art-films p:last-child { margin-bottom: 0; }
/* A review opens with the citation block; an article has a title above it. */
.page-article .art-title + .art-films { margin-top: var(--space-md); }

/* --- Byline -------------------------------------------------------------- */
.page-article .art-byline {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.page-article .art-byline p { margin-bottom: 0; }

/* --- Body ---------------------------------------------------------------- */
.page-article .art-body {
  margin-top: var(--space-lg);
  font-size: var(--art-size);
  line-height: var(--art-leading);
}
.page-article .art-body p { margin-bottom: var(--art-para); }
.page-article .art-body p:last-child { margin-bottom: 0; }

.page-article .art-body h2 {
  margin-top: var(--space-xl);
  border-bottom: 0;
  font-size: var(--text-lg);
}
.page-article .art-body h3 { margin-top: var(--space-lg); font-size: var(--text-md); }
.page-article .art-body h4 { margin-top: var(--space-md); margin-bottom: var(--space-2xs); }
.page-article .art-body h5,
.page-article .art-body h6 { margin-top: var(--space-md); margin-bottom: var(--space-2xs); }

/* Lesson plans lean on lists far more than an essay does. */
.page-article .art-body--lesson ul,
.page-article .art-body--lesson ol { margin-bottom: var(--art-para); }
.page-article .art-body--lesson li { margin-bottom: var(--space-2xs); }

/* --- Interview transcript ------------------------------------------------ */
/* A Q&A is scanned by who is speaking, so the name leaves the paragraph
   flow and sits above the turn. */
.page-article .art-turn { margin-top: var(--art-para); }
.page-article .art-speaker {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: bold;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.page-article .art-turn + p { margin-left: 0; }

/* --- Pull quote ---------------------------------------------------------- */
.page-article .art-quote {
  margin: var(--space-xl) 0 var(--space-xl) var(--space-lg);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-rule);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}
.page-article .art-quote p { margin-bottom: var(--space-2xs); }
.page-article .art-quote p:last-child {
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

/* --- Scholarly apparatus -------------------------------------------------- */
.page-article .art-notes,
.page-article .art-workscited {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.page-article .art-notes p {
  margin-left: 1.6em;
  margin-bottom: var(--space-xs);
  text-indent: -1.6em;
}
.page-article .art-workscited p {
  margin-left: 2em;
  margin-bottom: var(--space-xs);
  text-indent: -2em;
}
/* Category labels inside the apparatus ("Scholarly Articles", "Film and TV").
   The hanging indent above belongs to the entries, not to the labels between
   them — headings are not <p>, so they need no reset here. */
.page-article .art-notes h3,      .page-article .art-notes h4,
.page-article .art-workscited h3, .page-article .art-workscited h4 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--text-md);
}
.page-article .footnote-ref {
  font-size: 75%;
  line-height: 0;
  position: relative;
  top: -0.5em;
  text-decoration: none;
}
.page-article .footnote-num { font-weight: bold; margin-right: 0.35em; }

.page-article .art-ack {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: thin solid var(--color-maroon);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-article .art-bio {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.page-article .art-bio p:last-child { margin-bottom: 0; }
.page-article .art-bio .authorName { color: var(--color-text); }

/* Embedded media anywhere in the content, not only inside .art-media.
   Eight YouTube and Vimeo players are written straight into article prose with
   width="500" on them, which overflowed a 390px phone by 126px — .art-media's
   rules never reached them because they are not in an .art-media wrapper.
   max-width fixes the overflow for every kind of embed; the 16:9 box below
   makes the video players scale properly instead of keeping their hard-coded
   pixel height and letterboxing inside it. Audio embeds (SoundCloud) are
   deliberately not matched — a 16:9 box round a player bar would be absurd. */
#mainContent iframe,
#mainContent video,
#mainContent embed,
#mainContent object {
  display: block;
  max-width: 100%;
  border: 0;
}
#mainContent iframe[src*="youtube"],
#mainContent iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* An embedded player or video sitting on its own between sections. */
.page-article .art-media {
  margin: var(--space-lg) 0;
}
.page-article .art-media iframe,
.page-article .art-media video,
.page-article .art-media embed,
.page-article .art-media object {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* The image rail sometimes carries its own heading — a sidebar label, not a
   page title. Demoted to h2 by the converters; sized to the rail. */
#selectedImage h2 {
  padding: 1em 21px 0;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-text);
}


/* ==========================================================================
   LAYER 4d · PAGE TYPE — SITE PAGES  (body.page-site)

   The six front-matter pages: home, journal issues, editorial staff, contact,
   guidelines, call for proposals. Each is a one-off, but they share a title +
   prose shape, and two of them are lists.
   ========================================================================== */

.page-site #mainContent > h1,
.page-site .site-section > h1 {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--color-rule);
  color: var(--color-heading);
  font-size: var(--text-xl);
  text-wrap: balance;
}

.page-site .site-section + .site-section { margin-top: var(--space-xl); }

.page-site .site-section h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
  color: var(--color-heading);
  font-size: var(--text-lg);
}
.page-site .site-section h2:first-child { margin-top: 0; }

/* Guidelines uses short all-caps labels (LENGTH, FORMAT, DEADLINE). */
.page-site .site-section h2 { letter-spacing: 0.02em; }

/* --- Journal issues: a list of issue + season pairs ---------------------- */
.page-site .site-issues h2 {
  margin: var(--space-md) 0 0;
  font-size: var(--text-md);
  font-weight: bold;
  color: var(--color-heading);
}
.page-site .site-issues h2 a { text-decoration: none; }
.page-site .site-issues h2 a:hover,
.page-site .site-issues h2 a:focus-visible { text-decoration: underline; }
.page-site .site-issues > p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Editorial staff: name, role, biography ------------------------------ */
/* A group heading on a site page — "Former Editorial Collective Members".
   Same treatment as a section head on a table of contents, because it is doing
   the same job: it separates one group of entries from another. It had no
   class and no margins at all, so it sat flush against the bio above it and
   read as one more person's name. */
.page-site .site-section {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--color-rule);
  color: var(--color-heading);
  font-size: var(--text-lg);
}

.page-site .site-entry { margin-top: var(--space-lg); }
.page-site .site-entry h3 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-heading);
}
/* the role line sits directly under the name */
.page-site .site-entry p:first-of-type {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}
.page-site .site-entry p { margin-bottom: var(--space-xs); }
.page-site .site-entry p:last-child { margin-bottom: 0; }

/* --- Home page ----------------------------------------------------------- */
.page-site .site-home .site-section:first-child { margin-bottom: var(--space-xl); }


/* ==========================================================================
   LAYER 5 · NARROW SCREENS
   The one breakpoint. Nothing above 820px is touched by anything in here, so
   the desktop layout is exactly what it was.

   The site is a fixed 799px page with two rails pinned to the viewport. That
   works on a desktop and cannot work on a phone, so below 820px the frame
   linearises: the rails leave their fixed positions and take their place in
   the document, which is already in reading order — masthead, navigation,
   article, selected image, footer. No source reordering needed.

   This layer and the viewport meta tag are ONE change, not two. Without the
   tag a phone renders at ~980px and scales the whole page down; with the tag
   and without this layer the 799px column overflows a 390px screen and every
   page scrolls sideways. Neither on its own is an improvement.
   ========================================================================== */
@media (max-width: 820px) {

  /* --- Frame -------------------------------------------------------------- */
  body {
    width: auto;
    max-width: var(--page-width);
    background-image: none;   /* the blue strip is painted for a 200px rail
                                 that does not exist at this width */
  }

  #pageHeader,
  #mainContent,
  #pageFooter p {
    float: none;
    margin-left: 0;
    width: auto;
  }
  #pageHeader   { padding: var(--space-lg) var(--space-md); }
  /* space-lg on top: with the nav now sitting directly above the content,
     a heading with no leading butts straight against the nav band. */
  #mainContent  { padding: var(--space-lg) var(--space-md) 0; }
  #pageFooter p { padding: var(--space-xl) var(--space-md) var(--space-md); }

  /* --- Navigation: a fixed right-aligned rail becomes a wrapped row ------- */
  nav#mainNavigation {
    position: static;
    width: auto;
    padding: var(--space-sm) var(--space-md);
    line-height: var(--leading-body);
    text-align: left;
    /* The same blue as the strip the nav sits on at desktop width. The strip
       is a repeat-y PNG painted for a 200px rail, so it has to come off here
       (see `body` above) and the nav has to paint its own band. An earlier
       version used --color-hover-bg for that, because it was a token already
       to hand; the effect was that the navigation changed colour between a
       laptop and a phone, which makes it read as a different object. It is
       the same object. --color-blue-light IS background-blue-200px.png. */
    background: var(--color-blue-light);

    /* Pinned to the top of the screen so the journal is always one tap away,
       however far into a 10,000-word interview the reader has scrolled.
       `sticky`, not `fixed`: sticky stays in normal flow, so the page needs no
       compensating top padding and nothing can slide under the bar at load.
       It costs 103px -- 12% of a 390px phone screen -- which buys six links
       and the search box always being reachable.

       This is exactly the rule that `overflow-x: hidden` on BODY used to
       break. That is gone (see `html` in LAYER 2). If a sticky element on this
       site ever stops sticking, an ancestor with overflow is the first thing
       to look for. */
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* A pinned bar covers the top of the page, so anything reached by a fragment
     link -- a footnote, a letter in the A-Z index -- would otherwise land
     underneath it. This is what keeps the target below the bar. Verified by
     tapping: a footnote and an index letter both land 16px clear of the nav. */
  [id] { scroll-margin-top: calc(var(--nav-sticky-height) + var(--space-md)); }
  nav#mainNavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
    padding: 0;
  }
  nav#mainNavigation table { margin-top: var(--space-sm); }
  nav#mainNavigation form  { margin: var(--space-xs) 0 0; }
  nav#mainNavigation .site-search { padding-right: 0; max-width: 22em; }
  nav#mainNavigation input { font-size: var(--input-min-size); }

  /* --- Image rail: under the article, where it reads as an illustration --- */
  /* In flow now, so the desktop scroll box must be undone or it would clip. */
  #selectedImage {
    position: static;
    top: auto;
    bottom: auto;
    width: auto;
    overflow-y: visible;
    padding: var(--space-lg) var(--space-md) 0;
  }
  #selectedImage img { width: auto; max-width: 100%; margin: 0; }
  #selectedImage p   { padding: var(--space-xs) 0 0; }

  /* Below 820px the page has no side margin for the A-Z rail to live in, so
     it becomes a wrapped bar in normal flow at the top of the list. */
  .page-site .index-az {
    position: static;
    transform: none;
    display: block;
    margin: 0 0 var(--space-lg);
    padding: var(--space-xs) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-rule);
    font-size: var(--text-sm);
    line-height: 2;
    text-align: left;
  }
  .page-site .index-az a { padding: 0 0.3em; }

  /* --- TOC: the two-column review table has nowhere to go ----------------- */
  /* The column heads label columns; with one column they label nothing, so
     they come out and the reviewer sits under the films it belongs to. */
  .page-toc .toc-colheads { display: none; }
  .page-toc .toc-entry--review { display: block; }
  /* Not italic: the film titles above it already are, and a second italic
     line reads as another film rather than as the reviewer's name.

     With the column heads gone, the name had nothing saying what it was --
     under a film credit, a bare personal name reads as easily as someone
     connected with the film. So the hidden label comes out of hiding here, in
     the voice of the column head it is standing in for: small, uppercase,
     letterspaced, muted. The NAME is what a reader is scanning for, so it
     takes body size and the same bold as an endnote number, and the label
     stays subordinate to it. */
  .page-toc .toc-entry--review .toc-reviewer {
    margin-top: var(--space-xs);
    text-align: left;
    font-style: normal;
    font-size: var(--text-base);
  }
  /* Weight goes on the NAMES and nothing else. The label, the commas and the
     "and" are all connective tissue; bolding them made "Reviewed by X and Y"
     one undifferentiated bold run. Plain lowercase here, matching the tone of
     the navigation, so the only thing standing up on the line is the people. */
  .page-toc .toc-reviewer-label {
    position: static;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-size: var(--text-sm);
    color: var(--color-subheading);
  }
  .page-toc .toc-reviewer-name { font-weight: bold; }

  /* A feature's author is in the same list and is no less a big deal, so the
     byline takes the same size as the reviewer's name. It keeps its italic:
     that is how it reads on a wide screen too, and roman is already doing the
     work of telling a reviewer apart from a film title. */
  .page-toc .toc-entry--feature .toc-byline {
    margin-top: var(--space-xs);
    font-size: var(--text-base);
  }

  /* --- Article ------------------------------------------------------------ */
  /* A 40% float inside a 360px column is four words wide. */
  .floatright {
    float: none;
    width: auto;
    margin: var(--space-md) 0;
  }
  .page-article .art-quote { margin-left: 0; }
}

/* ==========================================================================
   LAYER 6 · PRINT — the article as an offprint

   Printing a page of this site used to produce the screen: a 799px column
   floated against a blue strip, a navigation rail nobody can click, a search
   box, and an image pinned by `position: fixed`, which in print means it lands
   on page one and the rest of the rail is simply lost.

   What a reader wants on paper is an OFFPRINT: the journal's name, the issue,
   the citation, the article, its notes, and the still it was published with.
   That is what this layer makes. Nothing here affects the screen.

   NOTE FIRST: none of this could work until the stylesheet stopped being
   linked as `media="screen"`. Every page carried
   `<link href="…ffc.css" media="screen">`, so a printed page got no site CSS
   at all -- it printed as bare HTML, and any print rules in this file would
   have been ignored however well written. 465 pages now say `media="all"`.
   See `_notes/scripts/print_media_attr.py`.

   Three decisions worth recording, because each was tested rather than
   assumed:

   1. ONE COLUMN, not two. A two-column body is the obvious "journal" look and
      it is achievable — `columns: 2` does flow across printed pages in Chrome
      and Safari. It was built and printed. It is not shipped, because the
      flow is unreliable exactly where this journal needs it: a figure or a
      block quote inside a column produces uneven column heights and, on long
      interviews, Chrome drops the balance entirely. A silently mangled page
      is worse than a plain one for a scholarly record. The variant is kept at
      the end of this layer, commented, with what it costs.

   2. THE STILL GOES AT THE END. It sits after `</article>` in the source, so
      the end of the article is where it already is: no reordering, no floats
      that behave differently on page one. It becomes a proper figure with a
      rule above it.

   3. SERIF, NOT VERDANA. Verdana is a screen face: wide, large on the body,
      and it eats paper. Georgia at 10.5pt sets the same article in noticeably
      fewer pages and reads better in ink. One token, --print-font, if that
      judgement should ever be reversed.
   ========================================================================== */
@media print {

  /* --- Page ---------------------------------------------------------------
     No `size`: whatever paper the reader has loaded is the right paper. The
     margins are generous enough to hole-punch or annotate down the left. */
  @page {
    margin: 18mm 16mm 20mm;
  }

  /* Print has its own scale, in points and millimetres, because paper does.
     Nothing below hard-codes a size or a colour; change it here. */
  :root {
    --print-font:      Georgia, "Times New Roman", Times, serif;
    --print-leading:   1.42;

    --print-size:      10.5pt;  /* body */
    --print-h1:        16pt;
    --print-h2:        11pt;
    --print-quote:     10pt;
    --print-sm:        9.5pt;   /* credits, byline */
    --print-xs:        9pt;     /* issue line, notes, works cited, bio */
    --print-2xs:       8.5pt;   /* speaker, caption, printed URLs */
    --print-3xs:       8pt;     /* footer */

    --print-ink:       #000;
    --print-paper:     #fff;
    --print-rule:      #888;
  }

  /* --- Undo the screen frame ---------------------------------------------
     The 799px page, the blue strip and the two fixed rails all exist to hold
     a layout against a viewport. Paper has no viewport. */
  html,
  body {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--print-paper) none;
    color: var(--print-ink);
    font-family: var(--print-font);
    font-size: var(--print-size);
    line-height: var(--print-leading);
  }
  html { overflow-y: visible; scrollbar-gutter: auto; }

  #mainContent,
  #pageHeader,
  #pageFooter p {
    float: none;
    width: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* --- What paper has no use for ------------------------------------------ */
  nav#mainNavigation,
  .site-search,
  .index-az,
  .search-page-form,
  form,
  button,
  input,
  video,
  audio,
  iframe,
  object,
  embed {
    display: none !important;
  }

  /* --- Masthead → offprint header ----------------------------------------- */
  #pageHeader {
    margin-bottom: 6mm;
    padding: 0 0 2mm;
    border-bottom: 1.5pt solid var(--print-ink);
  }
  #pageHeader img {
    width: 62mm;
    height: auto;
    margin: 0 0 1.5mm;
  }
  #pageHeader #issueID,
  #pageHeader #issueID a {
    margin: 0;
    color: var(--print-ink);
    font-size: var(--print-xs);
    font-style: italic;
    text-decoration: none;
  }

  /* Ink, not screen colour: the maroon body text and grey bylines are chosen
     against a white screen, and both go muddy in a home printer's black. */
  #mainContent, #mainContent *,
  #pageHeader,  #pageHeader  *,
  #pageFooter,  #pageFooter  *,
  #selectedImage, #selectedImage * { color: var(--print-ink); }

  /* --- The article -------------------------------------------------------- */
  .page-article #mainContent > section + section { margin-top: 6mm; }

  .page-article .art-title h1 {
    font-size: var(--print-h1);
    line-height: 1.2;
    color: var(--print-ink);
  }
  .page-article .art-films {
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid var(--print-rule);
    font-size: var(--print-sm);
    font-weight: normal;
  }
  .page-article .art-byline {
    font-size: var(--print-sm);
    color: var(--print-ink);
  }
  .page-article .art-body {
    margin-top: 5mm;
    font-size: var(--print-size);
    line-height: var(--print-leading);
  }
  .page-article .art-body p { margin-bottom: 0; text-indent: 1.6em; }
  .page-article .art-body > p:first-of-type,
  .page-article .art-body h2 + p,
  .page-article .art-body h3 + p,
  .page-article .art-body h4 + p,
  .page-article .art-quote + p { text-indent: 0; }

  /* An interview is read by speaker, so its turns keep paragraph spacing and
     lose the indent — the name is the marker, not the indent. */
  .page-article .art-turn,
  .page-article .art-turn + p,
  .page-article .art-body--lesson p { text-indent: 0; margin-bottom: 2.6mm; }
  .page-article .art-speaker {
    color: var(--print-ink);
    font-size: var(--print-2xs);
    break-after: avoid;
  }

  .page-article .art-quote {
    margin: 4mm 0 4mm 8mm;
    padding-left: 4mm;
    border-left: 1pt solid var(--print-rule);
    font-family: var(--print-font);
    font-size: var(--print-quote);
    color: var(--print-ink);
  }
  .page-article .art-quote p:last-child { color: var(--print-ink); }

  h1, h2, h3, h4, h5, h6 {
    color: var(--print-ink);
    break-after: avoid;
    break-inside: avoid;
  }
  .page-article #mainContent > section > h2 {
    border-bottom: 0.5pt solid var(--print-rule);
    font-size: var(--print-h2);
  }

  /* --- The still ---------------------------------------------------------
     Unpinned from the viewport and set as a figure at the foot of the piece,
     which is where it already sits in the source. */
  #selectedImage {
    position: static;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: 88mm;
    overflow: visible;
    margin: 7mm 0 0;
    padding: 4mm 0 0;
    border-top: 0.5pt solid var(--print-rule);
    break-inside: avoid;
  }
  #selectedImage img {
    width: auto;
    max-width: 100%;
    max-height: 70mm;
    margin: 0 0 2mm;
    background: none;
  }
  #selectedImage p {
    padding: 0;
    font-size: var(--print-2xs);
    line-height: 1.35;
    color: var(--print-ink);
  }
  #selectedImage h2 { font-size: var(--print-sm); }

  /* --- Scholarly apparatus ------------------------------------------------ */
  .page-article .art-notes,
  .page-article .art-workscited,
  .page-article .art-bio {
    font-size: var(--print-xs);
    line-height: 1.35;
  }
  .page-article .footnote-ref { text-decoration: none; }

  /* --- Links -------------------------------------------------------------
     A printed link is a dead end unless the address comes with it, and the
     addresses on this site are worth printing: they were deliberately
     embedded in meaningful text rather than left as bare URLs. Expanded only
     for external links inside the article, and never for the hundred-odd
     whose visible text is already the URL (`.url-literal`). */
  a { color: var(--print-ink); text-decoration: none; }
  #mainContent a[href^="http"]:not(.url-literal)::after {
    content: " <" attr(href) ">";
    font-family: var(--print-font);
    font-size: var(--print-2xs);
    word-break: break-all;
  }
  #mainContent a[href^="#"]::after,
  #pageHeader a::after,
  #selectedImage a::after { content: none; }

  /* --- Footer → a line you can cite from ---------------------------------- */
  #pageFooter {
    margin-top: 8mm;
    padding-top: 2mm;
    border-top: 0.5pt solid var(--print-rule);
  }
  #pageFooter p {
    font-size: var(--print-3xs);
    color: var(--print-ink);
  }
  #pageFooter p::before {
    content: "Films for the Feminist Classroom · ffc.twu.edu · ";
  }

  /* --- Where pages may and may not break ---------------------------------- */
  p, li, blockquote { orphans: 3; widows: 3; }
  .page-article .art-title,
  .page-article .art-films,
  .page-article .art-byline,
  .page-article .art-quote,
  .page-article .art-bio,
  figure, table, img { break-inside: avoid; }
  .page-article .art-notes p,
  .page-article .art-workscited p { break-inside: avoid; }

  /* --- Everything the screen hides stays hidden --------------------------- */
  .visually-hidden { position: absolute !important; width: 1px; height: 1px;
                     overflow: hidden; clip-path: inset(50%); }

  /* Toner, not screen colour. */
  * { -webkit-print-color-adjust: economy; print-color-adjust: economy; }

  /* --- TOC and site pages ------------------------------------------------- */
  .page-toc #mainContent,
  .page-site #mainContent { font-size: var(--print-quote); }
  .page-toc .toc-entry { break-inside: avoid; }


  /* --- THE TWO-COLUMN VARIANT — not enabled -------------------------------
     Uncomment to set the body of an article in two columns that flow from
     page to page. It works, and on a short review it looks like a journal
     offprint. What it costs, measured on this site's own pages:

       · a figure or pull quote inside the flow leaves the two columns at
         very different heights on that page;
       · past roughly 3,000 words Chrome stops balancing the last page, so a
         long interview ends with one full column and one empty;
       · Safari and Chrome disagree about where a column breaks, so the same
         article paginates differently depending on who prints it.

     For a journal of record, none of that is worth the look.

  .page-article .art-body {
    columns: 2;
    column-gap: 8mm;
    column-rule: 0.5pt solid #ddd;
    text-align: justify;
    hyphens: auto;
  }
  .page-article .art-body h2,
  .page-article .art-body h3 { column-span: all; }
  ------------------------------------------------------------------------- */
}