/* Light 光 · Film. Projection black first; in light theme, a light table with orange negatives.
   A projector and a screen for the hero, a strip you scrub, intertitles, a shot list, slug lines. */
.page-film { --hole: var(--bg); --base: #121212; --edge: #E9A23B; }
[data-theme="light"] .page-film { --base: #C8692A; --edge: #3B1B08; }
.page-film h1, .page-film h3, .page-film .sh h2 { font-family: "Jost", var(--sys-zh); font-weight: 300; }
.slug, .page-film .face-no, .sc, .tcode, .edge, .it-reel { font-family: "Courier Prime", "Courier New", monospace; letter-spacing: .06em; }

/* hero: a beam, a screen, credits */
.hero-film { min-height: calc(100vh - var(--bar-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 6vh clamp(18px, 4vw, 56px) 8vh; overflow: hidden; }
.hf-beam { position: absolute !important; inset: 0; pointer-events: none; }
.hf-screen { position: relative; width: min(1120px, 92vw); aspect-ratio: 2.39 / 1; box-shadow: 0 0 120px color-mix(in srgb, var(--acc) 14%, transparent); }
.hf-plate { position: absolute !important; inset: 0; }
.hf-credits { position: relative; text-align: center; display: grid; justify-items: center; gap: 10px; }
.hf-credits .slug { font-size: 13.5px; color: var(--dim); margin: 0; }
.hf-credits h1 { font-size: clamp(64px, 9vw, 132px); line-height: 1; letter-spacing: .32em; text-transform: uppercase; margin: 6px 0 0 .32em; }
html[lang="zh-CN"] .hf-credits h1 { letter-spacing: .5em; margin-left: .5em; }
.hf-credits .deck { font-size: clamp(18px, 1.8vw, 23px); color: var(--fg); margin: 0; max-width: 40ch; }
.hf-credits .face-no { font-size: 12.5px; color: var(--dim); margin: 6px 0 0; }

/* intro */
.intro-film { padding: 70px clamp(18px, 4vw, 56px) 40px; }
.intro-film .intro-in { max-width: 40rem; margin: 0 auto; }

/* the strip */
.tl-film { padding: 70px 0 60px; }
.tl-film .sh { padding: 0 clamp(18px, 4vw, 56px); max-width: calc(var(--measure) + 120px); margin-left: auto; margin-right: auto; }
.strip { overflow-x: auto; cursor: grab; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; padding: 10px 0 20px; }
.strip.dragging { cursor: grabbing; }
.strip-in { display: flex; width: max-content; background-color: var(--base); padding: 34px 40px; position: relative;
  background-image: radial-gradient(ellipse 5.5px 4.5px at 50% 50%, var(--hole) 96%, transparent 100%), radial-gradient(ellipse 5.5px 4.5px at 50% 50%, var(--hole) 96%, transparent 100%);
  background-size: 24px 16px, 24px 16px; background-position: 0 9px, 0 calc(100% - 9px); background-repeat: repeat-x; }
.fr { position: relative; width: 320px; margin-right: 14px; text-decoration: none; color: var(--fg); display: block; }
.fr .edge { position: absolute; top: -24px; left: 0; font-size: 10.5px; color: var(--edge); white-space: nowrap; opacity: .9; }
.fr-pic { aspect-ratio: 4 / 3; position: relative; outline: 1px solid rgba(0, 0, 0, .5); }
.fr-pic .plate { position: absolute !important; inset: 0; }
.fr-t { display: block; font-size: 13px; color: #d8d8d4; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="light"] .fr-t { color: #2b1405; }
.fr:hover .fr-pic { outline: 2px solid var(--acc); }

/* an era: an intertitle, a scene, a shot list */
.era-film { max-width: 1240px; margin: 0 auto; padding: 120px clamp(18px, 4vw, 56px) 20px; }
.intertitle { max-width: 780px; margin: 0 auto 46px; text-align: center; padding: 46px 40px 40px; border: 1px solid var(--fg); outline: 1px solid var(--fg); outline-offset: 6px; display: grid; gap: 12px; justify-items: center; }
.it-reel { font-size: 13px; color: var(--dim); }
.era-film h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; }
.it-yrs { font-size: 15px; color: var(--dim); }
.ef-scene .era-plate { width: 100%; aspect-ratio: 2.39 / 1; }
.era-film .era-sum { max-width: 40rem; margin: 40px auto 0; }
.shots { list-style: none; margin: 50px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.nc-film { display: grid; grid-template-columns: 76px 120px 1fr; gap: 0 22px; width: 100%; padding: 18px 12px; border-bottom: 1px solid var(--rule); align-items: baseline; transition: background-color .3s; position: relative; }
.nc-film:hover { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.nc-film .sc { font-size: 13px; color: var(--acc); }
.nc-film .tcode { font-size: 12.5px; color: var(--dim); }
.nc-film .nc-body { display: grid; gap: 3px; }
.nc-film .nc-n { font-weight: 500; font-size: 19px; line-height: 1.3; }
.nc-film .nc-yr { font-size: 14px; color: var(--dim); }
.nc-film .nc-k { font-size: 15.5px; line-height: 1.55; max-width: 48rem; }
.nc-film.seen .sc::after { content: " \25CF"; color: var(--acc2); }
@media (max-width: 700px) { .nc-film { grid-template-columns: 64px 1fr; } .nc-film .tcode { display: none; } }

/* glossary like subtitles */
.gloss-film, .gal-film { max-width: 1240px; margin: 0 auto; padding: 110px clamp(18px, 4vw, 56px) 0; }
.terms-film { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 40px; }
.terms-film button { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid var(--rule); }
.terms-film .tw { font-family: "Courier Prime", monospace; font-size: 13px; color: var(--acc); letter-spacing: .08em; }
.terms-film .tn { font-size: 21px; font-weight: 400; }
.terms-film .tg { font-size: 15px; color: var(--dim); line-height: 1.5; }
.terms-film button:hover .tn { color: var(--acc); }

/* gallery: frames on a strip */
.gal-film .gallery { background-color: var(--base); padding: 30px 26px; gap: 12px;
  background-image: radial-gradient(ellipse 5.5px 4.5px at 50% 50%, var(--hole) 96%, transparent 100%), radial-gradient(ellipse 5.5px 4.5px at 50% 50%, var(--hole) 96%, transparent 100%);
  background-size: 24px 16px, 24px 16px; background-position: 0 7px, 0 calc(100% - 7px); background-repeat: repeat-x; }
.gal-film .gimg { height: 200px; background: #000; }
.gal-film .gcap { color: #d8d8d4; } .gal-film .gcap span { color: #9a9a96; }
[data-theme="light"] .gal-film .gcap { color: #2b1405; }

/* drawer */
.drawer[data-face="film"] .dw-title { font-family: "Jost", var(--sys-zh); font-weight: 300; }
.drawer[data-face="film"] .dw-crumb { font-family: "Courier Prime", monospace; font-size: 13px; letter-spacing: .04em; }
.drawer[data-face="film"] .q-orig { font-family: "Jost", var(--sys-zh); }
.drawer[data-face="film"] .dw-key { font-weight: 300; font-size: 1.28em; }