/* html * { outline: 0.1px solid gray }*/

:root {
    --bg-intrinsic-width: 1508;
    --bg-intrinsic-height: 1024;
    --bg-intrinsic-screen-top: 123;
    --bg-intrinsic-screen-width: 808;

    --screen-width: calc(min(67vw, (16 / 9) * 50vh));
    --screen-height: calc(var(--screen-width) * (9 / 16));
    --screen-top: calc(var(--bg-height) * (var(--bg-intrinsic-screen-top) / var(--bg-intrinsic-height)));

    --bg-width: calc(var(--screen-width) * (var(--bg-intrinsic-width) / var(--bg-intrinsic-screen-width)));
    --bg-height: calc(var(--bg-width) * (var(--bg-intrinsic-height) / var(--bg-intrinsic-width)));
    
    --paper-width: calc(min(100vw - 16px, 840px));
}

html {
    font-family: "Baskerville", Georgia, serif;
    font-size: 20px;
    line-height: 130%;
    text-shadow: 0 0 0.6px currentColor, 0 0 0.5px currentColor;
    
    overflow-wrap: break-word;
    font-kerning: normal;
    -webkit-text-size-adjust: 100%;
    
    background: black;
    color: white;
}

body {
    margin: 0;
}








#cinema {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--bg-height);
    z-index: -1;
    
    background: url('cinema.png') no-repeat center top / var(--bg-width) var(--bg-height);
}
#cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  
  opacity: 0;
  transition: opacity 3s ease-out;
  background-color: black;
}
body.cinema-playing #cinema::before {
    opacity: 0.7;
}

#screen {
    display: block;
    
    box-sizing: border-box;
    width: var(--screen-width);
    height: var(--screen-height);
    
    margin: 0 auto;
    margin-top: var(--screen-top);
}
div#screen {
    padding: 4px;
    padding-top: calc(var(--screen-height) / 5);
    
    background-color: rgba(255, 255, 255, 0.15);
    
    text-align: center;
    font-style: italic;
}

#paper {
    box-sizing: border-box;
    width: var(--paper-width);
    
    margin: 0 auto;
    margin-top: 24px;
    transition: margin-top 3s ease-out;
    
    color: rgb(28 28 28);
    
    border: 16px solid transparent;
    border-image: url("paper.png") 16 fill / / 8px round;
    box-shadow: black 0 8px 160px 32px;
}
body.has-screen #paper { margin-top: calc(var(--screen-top) + max(120px, var(--screen-height) / 2)); }
body.has-film #paper { margin-top: calc(var(--screen-top) * 1.5 + var(--screen-height)); }
body.cinema-playing #paper { margin-top: calc(var(--screen-top) * 3 + var(--screen-height)); }

#hand {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    background: url('hand.png') no-repeat bottom right;
    background-size: contain;
    height: 480px;
    margin-top: -179px;
    background-position-x: calc(100vw / 2 + var(--paper-width) / 2 - 133px);
}

#newsletter {
    display: block;
    box-sizing: border-box;
    height: 220px;
    margin-top: 81px;
    
    background: url('box.png') no-repeat bottom center / contain;
    text-align: center;
    padding-top: 45px;
    
    color: rgb(28 28 28);
}

@media (prefers-color-scheme: dark) {
    #paper {
        color: rgb(227 227 227);
        border-image-source: url("paper dark.png");
    }
    #hand {
        background-image: url('hand dark.png');
    }
    #newsletter {
        color: rgb(227 227 227);
        background-image: url('box dark.png');
    }
}
@supports not (border-image: url("paper.png") 16 fill / / 8px round) {
  #paper { background-color: white !important; color: black !important; }
}








header {
    margin-top: 32px;
    text-align: center;
}
#title a {
    display: inline-block;
    padding: 4px 0;
}
#menu {
    font-size: 0.8em;
}
#menu a {
    display: inline-block;
    padding: 4px 0;
}
#menu .separator {
    display: inline-block;
    width: 24px;
    background: url('reel separator.png') no-repeat center center / 13px;
}
@media (prefers-color-scheme: dark) {
    #menu .separator {
        background-image: url('reel separator dark.png');
    }
}
@media (max-width: 640px) {
    #menu .separator { display: none; }
    #menu a { display: block; }
}

main > * {
    box-sizing: border-box;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
}
main > figure {
    max-width: initial;
}

footer {
    margin-top: 32px;
    
    text-align: center;
    font-size: 0.8em;
}
footer a {
    display: inline-block;
    padding: 8px 0;
}






main h1 {
    margin: 0;
    font-size: 26px;
    line-height: 150%;
    font-weight: 500;
    text-align: center;

    break-inside: avoid;
    break-after: avoid;
    text-rendering: optimizeLegibility;
}

main h2 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;

    break-inside: avoid;
    break-after: avoid;
    text-rendering: optimizeLegibility;
}

main p {
    margin: 0;
    font-weight: 400;

    orphans: 3;
    widows: 3;
}

main ul, main ol {
    margin: 0;
    padding-left: 40px;
}
main > ul, main > ol {
    padding-left: 36px;
}

main figure {
    margin: 0;
    break-inside: avoid;
}
main figure img {
    display: block;
    margin: 0 auto;
}
main figure figcaption {
    font-size: 16px;
    line-height: 117%;
    font-weight: 400;
    text-align: center;
    font-style: italic;
}

main hr {
    margin: 0;
    border: 0;
}







main > *:first-child { margin-top: 46px !important; }

main h1, main h2 { margin-top: 58px; }

main p { margin-top: 15px;  }
main h1 + p, main h2 + p { margin-top: 9px; }

main ul, main ol { margin-top: 15px; }
main li + li { margin-top: 8px; }
main li > p:last-child { margin-bottom: 21px; }

main figure { margin-top: 33px; }
main figure figcaption { margin-top: 13px; }
main figure + * { margin-top: 30px !important; }

main hr { margin-top: 62px; }







a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@supports (font: -apple-system-body) {
    a { text-decoration-thickness: 0.5px; }
}







.film-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 32px;
    margin-top: 32px;
    
    font-size: 0.9em;
    text-align: center;
}
.film-grid p {
    margin: 0;
}
.film-grid p a {
    display: block;
    text-decoration: none;
    padding-bottom: 24px;
}
.film-grid img {
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 12px;
}