@charset "UTF-8";
/* ==========================================================================
   FILMS FOR THE FEMINIST CLASSROOM — ffc.css
   Layered rewrite. Live on the converted page types; ffcmain.css still
   serves everything not yet converted. Delete ffcmain.css when it serves
   nothing.

   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 */
  --rail-top:           500px;  /* these are positions, not spacing         */
  --rail-top-tall:      300px;  /* a rail with several images starts higher,
                                   clearing the nav, which ends at 277px      */
  --rail-img-width:     180px;

  /* --- 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. */
/* 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);
}
.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); }
.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. */
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-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); }
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);
}
/* Add to the <aside> when a rail carries more than one image. It starts higher
   — there is 223px of dead space between the bottom of the nav and --rail-top
   — which is usually enough for three images to fit without scrolling at all. */
#selectedImage.rail-tall { top: var(--rail-top-tall); }
#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);
}

/* 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 ------------------------------ */
.page-site .site-entry { margin-top: var(--space-lg); }
.page-site .site-entry h2 {
  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;
    background: var(--color-hover-bg);
  }
  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,
  #selectedImage.rail-tall {
    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. Small,
     roman and muted makes it a third thing. */
  .page-toc .toc-entry--review .toc-reviewer {
    margin-top: var(--space-2xs);
    text-align: left;
    font-style: normal;
  }

  /* --- 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,
  #selectedImage.rail-tall {
    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; }
  ------------------------------------------------------------------------- */
}