/* animate! archive: the one stylesheet for every page (2026).
   One font, three sizes, two weights, one accent. Retune from the block below.
   Replaces new.css (2006), the WordPress theme's style.css, all.css (2003),
   accessibility.css, print.css and the film player's inline style; those
   originals are kept outside the site in _Documentation/historical-stylesheets/. */

:root {
  --font: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;  /* the original 2003–6 reading font */
  --small: 11px;   --small-lh: 16px;   /* captions, menu notes, right column, notes */
  --body: 13px;    --body-lh: 20px;    /* reading text, menu items, minor headings */
  --large: 18px;   --large-lh: 24px;   /* page and section titles */
  --space: 28px;   /* above a heading: separates clusters */
  --ink: #111111;      /* text and headings */
  --quiet: #595959;    /* captions, credits, menu notes */
  --accent: #A40306;   /* links */
  --visited: #550002;
  --paper: #F3F3EC;
  --panel: #E8E8DE;    /* archive note */
  --rule: #D6D6CC;
}

/* Base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  width: 780px; margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font: 400 var(--body)/var(--body-lh) var(--font);
}
* { font-family: inherit; }
p, td, li, dd, dt, q, blockquote, address, input, textarea, select, button { font-size: inherit; line-height: inherit; }
p, ul, ol, dl, table, blockquote, address, form { margin: 0 0 10px; padding: 0; }
blockquote { margin-left: 16px; }
address { font-style: normal; }
b, strong, .film_title_animate { font-weight: 700; }
i, em, cite, .referenced_title, .film_title_other { font-style: italic; }
big, font, tt, code, pre, .quote { font: inherit; }
pre { white-space: pre-wrap; }
sup, sub { font-size: var(--small); line-height: 0; }
center { text-align: inherit; }

/* Headings: two sizes. h2 is the page or section title; h3 and below are body-size bold. */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; margin: var(--space) 0 6px; }
h1, h2 { font-size: var(--large); line-height: var(--large-lh); }
h3, h4, h5, h6 { font-size: var(--body); line-height: var(--body-lh); }
h2 + h3, h3 + h4, h4 + h5,
#content > h2:first-of-type, #index > h2:first-of-type, #content > .post:first-of-type > h2:first-child,
#sidebar > h2:first-child, #sidebar > h3:first-child, .filmVideo + h3 { margin-top: 0; }
h2 + .filmVideo { margin-top: 12px; }

/* Links: one colour, no extra weight */
a { color: var(--accent); font-weight: inherit; text-decoration: none; }
a:visited { color: var(--visited); }
a:hover { color: var(--ink); text-decoration: underline; }
a:active { color: #E00000; }

/* Small type: one style for every note, caption, credit and footer */
.caption, .imageCaption, .imageCaption p, .tiny, .footer, .copyrightFooter p,
.extrainformation, .extrainformation p, .role, dl, dd p, .archive-note, small, .dateCaption,
.subnavigation, .subnavigation_element, #sidebar {
  font-size: var(--small); line-height: var(--small-lh);
}
.caption, .imageCaption, .imageCaption p, .tiny, .footer, .copyrightFooter p, .role, dt, .extrainformation p, .dateCaption, small { color: var(--quiet); }
.caption, .imageCaption, .tiny { margin: 2px 0 10px; }
.imageCaption p { display: inline; }
.footer, .copyrightFooter p, .copyright { margin: var(--space) 0 10px; padding-top: 6px; border-top: 1px solid var(--rule); }

/* Lists */
ul, ol { list-style: none; }
li { margin: 0; }
dt { margin: 8px 0 0; }
dd { margin: 0; }
dl.sublist { margin: 0; }
.post dl { font-size: var(--body); line-height: var(--body-lh); }

/* Tables */
table { border-collapse: collapse; border-spacing: 0; background: transparent; }
th { text-align: left; font-weight: 400; padding: 0 10px 0 0; }
td { vertical-align: top; text-align: left; padding: 6px 10px 6px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.table-hidden-label { opacity: 0; }

/* Images */
img { border: 1px solid #000; margin: 4px 0 0; vertical-align: top; }
img.logo, img.icon { border: 0; }
img.logo { margin: 0; }
#content img.logo { margin: 14px 30px 10px 0; vertical-align: baseline; }  /* funder logos: one baseline, 2006 spacing */
#content img.logo[src$="finetake-logo.svg"] { vertical-align: -4px; }  /* its dots hang below the letters */
img.icon { float: left; margin: 0 6px 8px 0; }
img.inlineimage { margin: 10px 4px 0 0; }
img.grid { margin: 0 4px 4px 0; border-color: #444; }
img.list { margin: 10px 0 0; }
.alignleft { float: left; margin: 0 10px 6px 0; }
.alignright { float: right; margin: 0 0 6px 10px; }
.indeximage { margin: 0 0 10px; border: 1px solid #999; border-top: 0; }

/* Layout: the 2006 grid, 780px wide. The three columns share one baseline:
   the first line of the menu ("News"), the page title and the right-hand title
   sit on the same line whatever font the reader has. */
body { display: grid; grid-template-columns: 20px 130px 15px 420px 15px 150px 30px; align-items: baseline; }
#header  { grid-area: 1 / 4 / 2 / 7; height: 50px; margin: 24px 0 16px; align-self: start; }
#navigation { grid-area: 2 / 2; color: var(--quiet); }
#content { grid-area: 2 / 4; padding-bottom: 50px; }
#index   { grid-area: 2 / 4 / 3 / 7; padding-bottom: 50px; }
#sidebar { grid-area: 2 / 6; padding-bottom: 50px; }
#content:has(> .filmVideo:not(h2 ~ *)) { align-self: start; }  /* a film at the top has no first line */
#menu { display: contents; }

/* Left menu: seven items at body size, a note under each in small type */
#navigation dl { margin: 0 0 28px; }
#navigation dt { font-size: var(--body); line-height: 20px; color: var(--ink); margin: 0 10px 0 0; border-bottom: 2px solid #DDD; }
#navigation dd { font-size: var(--small); line-height: var(--small-lh); color: var(--quiet); margin: 3px 10px 8px 0; }
#navigation a:hover { text-decoration: none; color: var(--ink); }
#navigation .hidden, .none, .ahem { display: none; }
.hidden { visibility: hidden; }

/* Right column */
#sidebar h2 { font-size: var(--large); line-height: var(--large-lh); margin-top: var(--space); }  /* same size as the page title */
#sidebar h3, #sidebar h4 { font-size: var(--body); line-height: var(--body-lh); margin-top: var(--space); }
#sidebar h2:first-child { margin-top: 0; }
#sidebar h2.hidden { white-space: nowrap; overflow: hidden; }  /* placeholder holds exactly the title line */
#sidebar p { margin-bottom: 8px; }
#sidebar .caption { margin: 2px 0 10px; }
#sidebar .caption img { display: block; margin-top: 10px; }
#sidebar .caption img:first-child { margin-top: 0; }
.subnavigation { margin: 12px 0 16px; border-top: 2px solid #DDD; border-bottom: 2px solid #DDD; }
.subnavigation ul { margin: 0 0 10px; }
#sidebar .subnavigation_element, .subnavigation li, .subnavigation dd { margin: 0; padding: 2px 0; border-bottom: 1px solid #DDD; }
#sidebar .subnavigation { border: 0; }
.last { border-bottom: 0; }
.printbutton { margin: 12px 0 0; padding: 2px 5px; border: 1px dashed #BBB; }
#director-websites { margin: 0 0 8px; }

/* Archive note: a quiet panel at the foot of the right column (or of the menu) */
.archive-note { color: var(--quiet); }
p.archive-note#archive-note { margin: var(--space) 0 0; padding: 8px 10px; background: var(--panel); }
#sidebar > p#archive-note:first-child { margin-top: 0; }
#sidebar > :first-child, #sidebar > .visually-hidden:first-child + *, #content > :first-child, #content > h1.visually-hidden + * { margin-top: 0; }  /* columns start level */

/* Marked passages from the period pages */
.context, .last_context { margin: 0 0 6px; border-top: 1px solid #BBB; }
.last_context { margin-bottom: 24px; border-bottom: 1px solid #BBB; }
.inproduction { background: #FF6633; }
.newcommission { background: #CCCC00; }
.voice01 { color: #FB000A; } .voice02 { color: #E08100; } .voice03 { color: #0074B6; } .voice04 { color: #009A33; }
.voice05 { color: #AEDC00; } .voice06 { color: #E000B9; } .voice07 { color: #3400DA; } .voice08 { color: #647D00; }
h1[class*=voice], h2[class*=voice], h3[class*=voice] { color: var(--ink); }  /* headings keep one colour */

/* Film player */
.filmVideo { margin: 0 0 1em; }
.filmVideo .frame { position: relative; width: 420px; max-width: 100%; }
.filmVideo .frame .ratio { position: relative; width: 100%; height: 0; padding-bottom: 75%; background: #000; }
.filmVideo .frame .ratio.wide { padding-bottom: 56.25%; }
.filmVideo iframe, .filmVideo video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* Keyboard and screen readers */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden:not(:focus):not(:focus-within), .skip-link:not(:focus) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap !important; border: 0 !important;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px; background: var(--paper); }

/* Phones: the same page in one column. Menu on top as a row, then content, right column, note. */
@media (width < 780px) {
  :root { --small: 13px; --small-lh: 19px; --body: 16px; --body-lh: 24px; --large: 21px; --large-lh: 27px; --space: 32px; }
  body { width: auto; padding: 16px; display: flex; flex-direction: column; align-items: stretch; overflow-wrap: anywhere; }
  #header, #content, #index, #sidebar, #navigation {
    width: auto; height: auto; min-width: 0; max-width: 100%; padding: 0; margin: 0 0 24px;
  }
  #header { order: 1; } #navigation { order: 2; } #content, #index { order: 3; } #sidebar { order: 4; }
  #navigation dl { display: inline; margin: 0; }
  #navigation dt { display: inline-block; margin: 0 14px 4px 0; border: 0; }
  #navigation dd, #navigation br { display: none; }
  img, video, iframe, object, embed { max-width: 100%; height: auto; box-sizing: border-box; }
  .table-scroll { max-width: 100%; overflow-x: auto; }
  .table-scroll table, .table-scroll tbody, .table-scroll tr { display: block; }
  .table-scroll th { display: inline-block; }
  .table-scroll td { display: block; border-top: 0; padding: 0 0 4px; }
  .table-scroll tr { border-top: 1px solid var(--rule); padding-top: 8px; margin-bottom: 8px; }
  .table-scroll td:empty { display: none; }
  input, textarea, select, button { max-width: 100%; box-sizing: border-box; }
}

/* Print */
@media print {
  body { width: auto; background: #fff; font-size: 10pt; display: block; }
  #navigation, .skip-link { display: none; }
  #header, #content, #index, #sidebar { width: auto; margin: 0 10% 1em; }
  a, a:visited { color: var(--visited); text-decoration: underline; }
  #content a[href^="http"]::after { content: " (" attr(href) ")"; }
}