@font-face { font-family: 'Silkscreen'; src: url('fonts/Silkscreen-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
/* BALTHAZAR / the online edition.
   Table columns, image tiles, a small local pixel font and ordinary page links.
   Responsive rules and compositor animation are deliberate efficiency additions. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #240000 url('images/velvet-tile.png') repeat; }
body { margin: 0; padding: 26px 14px 38px; color: #e3d4ac; font: 16px/1.5 Georgia, 'Times New Roman', serif; }
a { color: inherit; text-decoration: underline; }
a:hover { color: #fff2bb; }
img { border: 0; max-width: 100%; }
button, input, textarea { font: inherit; border-radius: 0; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #b22a39; outline-offset: 3px; }
.site-footer a:focus-visible, .directory a:focus-visible, .primary-nav a:focus-visible, .wordmark:focus-visible { outline-color: #f0d18a; outline-offset: -3px; }
.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; }
.skip-link { position: absolute; left: 16px; top: -100px; background: #fff1c8; color: #380d16; padding: 10px 18px; z-index: 10; }
.skip-link:focus { top: 5px; }
.site { width: 100%; max-width: 1180px; margin: 0 auto; border: 1px solid #9e7c46; background: #310606; box-shadow: 0 8px 45px #0d0408; }
.utility { min-height: 29px; padding: 6px 18px; border-bottom: 1px solid #a8834a; background: #190e11; color: #c1aa80; font: 12px/1.4 'Courier New', monospace; letter-spacing: 1px; }
.utility a { float: right; letter-spacing: 0; }
.masthead { padding: 20px 12px 15px; text-align: center; background: #5a0000 url('images/masthead.png') repeat-x; border-top: 3px double #a78248; border-bottom: 3px double #a78248; }
.wordmark { display: inline-block; color: #f0dca2; font: bold 76px/.95 Georgia, 'Times New Roman', serif; letter-spacing: 5px; text-decoration: none; text-shadow: 2px 2px #280810; }
.wordmark:hover { color: #fff0bd; }
.wordmark span { display: block; margin: 11px 8% 0; padding: 8px 0 0; border-top: 1px solid #ba9352; font: 18px/1.2 'Times New Roman', serif; letter-spacing: 12px; }
.response-shell { max-width: 700px; margin: 25px auto; }
.response-shell .wordmark { font-size: 48px; }
.response-shell .email-address { overflow-wrap: anywhere; }
.primary-nav { background: #140e10; border-bottom: 1px solid #9e7c46; text-align: center; font: bold 13px/1.4 Verdana, Arial, sans-serif; }
.primary-nav a { display: inline-block; padding: 12px 17px; border-right: 1px solid #4b3431; text-decoration: none; }
.primary-nav a:first-child { border-left: 1px solid #4b3431; }
.primary-nav .current, .primary-nav a:hover { background: #920000 url('images/maroon-bar.png') repeat-x; color: #fff0c7; }
.bulletin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 18px; min-height: 48px; padding: 8px 16px; background: #b69355 url('images/gold-bar.png') 0 0 / auto 100% repeat-x; color: #24130b; text-align: center; font: 14px/1.5 Verdana, Arial, sans-serif; }
.bulletin b { font-size: 11px; letter-spacing: 1px; }
.bulletin a { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .35em; min-height: 32px; text-decoration: none; }
.bulletin a:hover { color: #700f1e; text-decoration: underline; }
.film-frame { position: relative; padding: 0 17px 18px; }
.film-banner, .rope-divider { position: relative; width: 100%; margin: 0; padding: 14px 0; }
/* One continuous sprite; crop its transparent canvas in the layout, preserving
   the artwork and keeping both ends on the outer edges of the site frame. */
.film-band { position: relative; width: 100%; aspect-ratio: 1354 / 118; overflow: hidden; animation: film-drift 16s ease-in-out infinite; }
.film-band img { position: absolute; top: 50%; left: -0.59%; width: 101.48%; max-width: none; height: auto; transform: translateY(-50%); image-rendering: pixelated; }
.rope-band { white-space: nowrap; font-size: 0; }
.rope-band img { display: inline-block; vertical-align: middle; width: 20%; max-width: none; height: auto; image-rendering: pixelated; }
.mobile-header, .mobile-only { display: none !important; }
.mobile-navigation { display: none; }
.layout { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 10px; }
.layout td { vertical-align: top; padding: 0; }
.directory-column { width: 232px; }
.notice-column { width: 202px; }
/* Main content comes first in reading/focus order. Place its two sidebars
   alongside it on desktop without changing the mobile document order. */
@media screen and (min-width: 900px) {
  .layout { display: block; padding: 10px; }
  .layout > tbody { display: block; }
  .layout > tbody > tr { display: grid; grid-template-columns: 232px minmax(0, 1fr) 202px; gap: 10px; }
  .content-column { grid-column: 2; grid-row: 1; }
  .directory-column { grid-column: 1; grid-row: 1; }
  .notice-column { grid-column: 3; grid-row: 1; }
}
.panel { border: 1px solid #8a6841; margin: 0 0 13px; background: #290505; }
.panel-heading { margin: 0; padding: 8px 9px; border-top: 1px solid #b26457; border-bottom: 1px solid #a37a43; color: #f2dfae; background: #750000 url('images/maroon-bar.png') repeat-x; font: bold 11px/1.4 Verdana, Arial, sans-serif; letter-spacing: .6px; }
.directory ul { margin: 0; padding: 5px 8px; list-style: none; }
.directory li { border-bottom: 1px dotted #4b3931; }
.directory li:last-child { border-bottom: 0; }
.directory a { display: block; padding: 8px 5px; font: 14px/1.45 Verdana, Arial, sans-serif; text-decoration: none; }
.directory a:hover { background: #750000; color: #fff0c7; }
.directory a.current { background: #960000; color: #fff0c7; border-left: 2px solid #d5b774; padding-left: 8px; }
.lobby { text-align: center; background: #cbbd98 url('images/gold-bar.png') repeat-x; color: #493a29; }
.donkey-normal { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.donkey-xray { position: absolute; inset: 0; display: none; pointer-events: none; }
.donkey-red, .donkey-crown, .donkey-skeleton { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.donkey-red, .donkey-crown { image-rendering: pixelated; }
.donkey-skeleton { -webkit-mask: url('donkey-skeleton-mask.svg?v=2') center / 100% 100% no-repeat; mask: url('donkey-skeleton-mask.svg?v=2') center / 100% 100% no-repeat; }
.rollover-note { margin: 8px 8px 12px; color: #53452f; font: 12px/1.8 Verdana, Arial, sans-serif; }
.motion-toggle { margin: 0 10px 12px; padding: 5px 10px; border: 1px solid #8e703d; color: #56331b; background: #dfcfaa; font: 10px/1.5 'Silkscreen', 'Courier New', monospace; cursor: pointer; }
.motion-toggle:hover { color: #920000; background: #f2ddb0; }
.motion-toggle:disabled { cursor: default; }
.journal { background: #161113; }
.issue-cover { display: block; margin: 13px; padding: 12px 9px 9px; background: #d4b958; border: 1px solid #aa8c3d; color: #211a14; text-decoration: none; }
.issue-cover:hover { background: #e4c76a; color: #211a14; }
.cover-category { display: block; font: 8px/1.4 Verdana, sans-serif; letter-spacing: 1px; }
.cover-title { display: block; margin: 9px 0; font: bold 27px/1 Georgia, serif; letter-spacing: -1px; }
.cover-rule { display: block; height: 3px; border-top: 3px double #36271a; }
.cover-number { display: block; padding: 12px 0 10px; font: 76px/1 'Times New Roman', serif; letter-spacing: -5px; }
.cover-bottom { display: block; border-top: 1px solid #493621; padding-top: 9px; font: 8px/1.3 Verdana, sans-serif; letter-spacing: .6px; }
.issue-note { padding: 0 12px; margin: 0 0 13px; font: 12px/1.6 Verdana, sans-serif; }
.page-content { min-width: 0; color: #30241d; background: #eee5cc; border: 1px solid #a38c61; padding: 23px; overflow-wrap: break-word; }
.page-content:focus { outline: none; }
.page-content.home { padding: 0; border: 0; background: transparent; }
.page-content a:hover { color: #991d30; }
.page-content h1, .page-content h2, .page-content h3 { line-height: 1.12; }
.page-title { margin: 8px 0 25px; padding-bottom: 20px; border-bottom: 3px double #917345; color: #780000; font: normal 38px/1.1 Georgia, serif; }
.section-index { color: #70563a; margin: 0 0 10px; font: 10px/1.5 Verdana, sans-serif; letter-spacing: 1.1px; }
.feature { background: #e6dbc0; }
.feature-body { padding: 19px; overflow: hidden; }
.feature-poster { display: block; width: 43%; float: left; margin: 0 20px 0 0; }
.feature-poster img { display: block; width: 100%; height: auto; border: 1px solid #5f5033; box-shadow: 3px 3px 0 #a99570; }
.feature-copy { overflow: hidden; }
.feature-kicker { color: #735133; font: 10px/1.5 Verdana, sans-serif; letter-spacing: 1.5px; margin: 3px 0 14px; }
.feature-copy h3 { margin: 0 0 15px; color: #870000; font-size: 32px; font-weight: normal; }
.film-byline { font: 12px/1.6 Verdana, Arial, sans-serif; }
.film-subtitle { font-style: italic; font-size: 14px; }
.date-ticket { display: table; border-top: 1px solid #98784c; border-bottom: 1px solid #98784c; margin: 22px 0 17px; padding: 6px 0; }
.date-ticket b { display: table-cell; font: 48px/1 Georgia, serif; color: #850000; padding-right: 13px; vertical-align: middle; }
.date-ticket span { display: table-cell; border-left: 1px dotted #8a683e; padding-left: 12px; font: 11px/1.8 Verdana, sans-serif; vertical-align: middle; }
.text-button { display: inline-block; border: 1px solid #73343a; padding: 7px 10px; background: #f5eacd; color: #681323; font: bold 12px/1.5 Verdana, sans-serif; }
.feature-foot { clear: both; margin: 0; padding: 8px; border-top: 1px solid #9b8359; font: 10px/1.5 'Courier New', monospace; letter-spacing: 1.2px; text-align: center; background: #d4c3a1; }
.paper { background: #eee5cc; padding: 22px; }
.welcome h2 { color: #780000; font-size: 34px; font-weight: normal; margin: 8px 0 12px; }
.welcome p { margin-bottom: 0; }
.welcome p + p { margin-top: 12px; }
.welcome p:last-child { font: bold 12px/1.5 Verdana, sans-serif; }
.home-links { background: #e2d7bb; }
.link-row { padding: 13px 17px; border-bottom: 1px solid #baa580; overflow: hidden; }
.link-row:last-child { border: 0; }
.link-number { float: left; color: #966d3f; font: 25px/1.4 Georgia, serif; width: 45px; }
.link-row div { overflow: hidden; }
.link-row h3 { margin: 0 0 4px; font-size: 19px; font-weight: normal; }
.link-row p { margin: 0; font: 12px/1.5 Verdana, sans-serif; color: #65523a; }
.desk-note { color: #d7c5a4; font: 13px/1.7 Georgia, serif; padding: 4px 2px 8px; }
.desk-note a { color: #e7c681; }
.desk-note a:hover { color: #fff3b8; }
.prose .lead { font-size: 24px; line-height: 1.4; }
.article-section { padding-top: 20px; margin-top: 25px; border-top: 1px solid #b59e73; }
.article-section h2 { font-size: 24px; font-weight: normal; margin: 0 0 14px; color: #780000; }
.article-end { padding-top: 18px; margin-top: 25px; border-top: 3px double #9e8052; font: 13px/1.5 Verdana, sans-serif; }
.reading-list { padding-left: 20px; }
.reading-list li { margin: 12px 0; }
.reading-list span { color: #755e43; font-size: 14px; }
.coming-soon { text-align: center; padding: 65px 0 85px; margin: 15px 0; border: 1px solid #b9a077; outline: 1px solid #b9a077; outline-offset: -5px; }
.coming-rule { color: #8c632e; }
.coming-soon p { margin: 14px 0; color: #631422; font: italic 30px/1.3 Georgia, serif; }
.magazine-announcement { border: 1px solid #7e623a; background: #d9bc59; padding: 32px; color: #2e2318; }
.magazine-name { border-bottom: 4px double #3f2c1b; margin: 0; padding-bottom: 20px; font: bold 48px/1 Georgia, serif; letter-spacing: -2px; }
.magazine-number { margin: 36px 0; font: 140px/1 'Times New Roman', serif; letter-spacing: -8px; }
.magazine-announcement h2 { font: normal 24px/1.4 Georgia, serif; border-top: 1px solid #65502c; padding-top: 20px; margin: 0; }
.magazine-page .journal { display: none; }
.resource-tabs { list-style: none; padding: 0; margin: -7px 0 23px; font: 12px/1.5 Verdana, sans-serif; }
.resource-tabs li { display: inline-block; margin: 0 13px 10px 0; }
.resource-row { border-top: 1px solid #b6a079; padding: 23px 0 18px; }
.resource-number { float: right; color: #957242; font: 30px/1 Georgia, serif; }
.resource-row h2 { margin: 0 0 12px; font-size: 25px; font-weight: normal; color: #780000; }
.resource-row p { margin: 0; color: #735d44; }
.resource-row:target { background: #e3d4b1; }
.screening-sheet { text-align: center; }
.screening-sheet h2 { font: normal 35px/1.15 Georgia, serif; margin: 12px 0; color: #780000; }
.screening-date { margin: 20px 0; border-top: 1px solid #b6a079; border-bottom: 1px solid #b6a079; padding: 12px 0; }
.poster { display: block; width: 350px; max-width: 100%; height: auto; margin: 22px auto 8px; border: 1px solid #756342; }
.rope-divider { width: calc(100% + 34px); margin-left: -17px; padding: 20px 0; }
.site-footer { padding: 8px 18px; border-top: 3px double #ad853b; background: #d1b26c url('images/gold-bar.png') repeat-x; }
.site-footer nav { max-width: 650px; margin: 0 auto; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: table; table-layout: fixed; width: 100%; }
.site-footer li { display: table-cell; text-align: center; vertical-align: middle; }
.site-footer a, .site-footer .social-placeholder { display: inline-block; width: 100%; padding: 10px; min-height: 44px; }
.site-footer img { display: block; width: 24px; height: 24px; margin: 0 auto; filter: none; }
.site-footer a:hover { background: #e7ca83; }
.site-footer .social-placeholder { opacity: 1; }
@media (max-width: 1080px) and (min-width: 900px) {
  .directory-column { width: 208px; }
  .notice-column { width: 182px; }
  .layout { border-spacing: 8px; }
  .layout { padding: 8px; }
  .layout > tbody > tr { grid-template-columns: 208px minmax(0, 1fr) 182px; gap: 8px; }
  .panel-heading { font-size: 10px; padding-left: 7px; padding-right: 7px; }
  .feature-body { padding: 15px; }
  .feature-poster { margin-right: 15px; }
  .feature-copy h3 { font-size: 29px; }
  .feature-kicker { font-size: 9px; letter-spacing: .7px; }
  .date-ticket { margin-top: 15px; }
  .page-content { padding: 20px; }
  .page-content.home { padding: 0; }
  .cover-title { font-size: 23px; }
}

/* Quiet movement for the film strip and rope. */
@keyframes rope-sway { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(1px); } }
@keyframes film-drift { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(1px); } }
.rope-divider img { image-rendering: pixelated; animation: rope-sway 14s ease-in-out infinite; }
.motion-paused .rope-divider img, .motion-paused .film-band,
.motion-suspended .rope-divider img, .motion-suspended .film-band { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rope-divider img, .film-band { animation: none !important; transform: none !important; }
}
@media print {
  html, body, .site { background: white; color: black; padding: 0; box-shadow: none; border: 0; }
  .directory-column, .notice-column, .utility, .primary-nav, .bulletin, .film-banner, .rope-divider, .site-footer { display: none !important; }
  .layout, .layout tbody, .layout tr, .layout .content-column { display: block; width: 100%; }
  .masthead { background: white; border: 0; }
  .wordmark { color: black; font-size: 40px; text-shadow: none; }
  .wordmark span { color: black; }
  .page-content, .panel, .paper, .feature { border: 0; background: white; }
}

/* Pixel lettering for the masthead and the small labels around the program. */
.wordmark { font-family: 'Silkscreen', 'Courier New', monospace; font-size: 72px; font-weight: normal; letter-spacing: 0; text-shadow: 3px 3px #390000; }
.wordmark span { font-family: 'Silkscreen', 'Courier New', monospace; font-size: 16px; letter-spacing: 8px; }
.utility, .primary-nav, .panel-heading, .section-index,
.feature-kicker, .feature-foot, .cover-category, .cover-bottom { font-family: 'Silkscreen', 'Courier New', monospace; font-weight: normal; }
.panel-heading { letter-spacing: 0; }
.directory a { font-family: 'Courier New', monospace; font-weight: bold; }
.site, .panel { box-shadow: 3px 3px 0 #100000; }
@media (max-width: 1080px) { .wordmark { font-size: 64px; } }

/* A fuller, close-up sculpture above the quartz, with a static fallback. */
.donkey-stage { padding: 4px 4px 0; }
.donkey-sculpture { position: relative; display: block; width: 100%; aspect-ratio: 224 / 244; text-decoration: none; }
.donkey-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.donkey-fallback { position: absolute; width: 82%; top: 4%; left: 9%; transform: scaleX(1.12); }
.donkey-sculpture.has-3d .donkey-fallback { display: none; }
.donkey-sculpture:hover .donkey-xray, .donkey-sculpture:active .donkey-xray, .donkey-sculpture:focus-visible .donkey-xray { display: block; }
.donkey-sculpture:focus-visible { outline-color: #850000; outline-offset: -3px; }
.quartz-plinth { position: relative; display: block; width: 100%; height: auto; margin: -5px auto 0; image-rendering: pixelated; }
.page-title, .page-content .section-index { text-align: center; }
.social-page { padding: 21px 4px; border-top: 1px solid #b6a079; overflow: hidden; }
.social-page > img { float: left; margin: 4px 19px 0 2px; }
.social-page > div { overflow: hidden; }
.social-page h2 { margin: 0 0 7px; font-size: 24px; font-weight: normal; color: #780000; }
.social-page p { margin: 0; font: 12px/1.7 'Courier New', monospace; color: #70563a; }
.social-page:target { background: #e3d4b1; }

.donkey-fallback .donkey-xray { -webkit-mask: url('donkey-mask.svg') center / 100% 100% no-repeat; mask: url('donkey-mask.svg') center / 100% 100% no-repeat; }
.donkey-sculpture:hover .donkey-fallback > .donkey-normal, .donkey-sculpture:active .donkey-fallback > .donkey-normal, .donkey-sculpture:focus-visible .donkey-fallback > .donkey-normal { visibility: hidden; }