/* C 一啖: Hong Kong film language. Song-ti posters, yellow subtitles, saturated colour fields.
   The logo's bite is the camera: a window at the start, the transition between scenes, the last shot. */
:root {
  --red: #c92c21; --oxblood: #3b0a0e; --jade: #0e4034; --sub: #f8e46c; --milk: #fff8ef; --deep: #240608;
  --song: 'Chiron Sung HK','Noto Serif HK','Songti TC',serif;
  --pad: clamp(16px, 5vw, 80px);
}
* { box-sizing: border-box; }
html { background: var(--red); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--red); color: var(--milk); font: 400 17px/1.85 var(--song); overflow-x: clip; }
img, video { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--sub); outline-offset: 3px; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: url(img/grain.png); opacity: .075; mix-blend-mode: overlay; }

.cbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 34px; border-radius: 3px; font: 700 clamp(17px, 1.35vw, 20px)/1 var(--song); letter-spacing: .06em; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s, transform .18s; }
.cbtn:active { transform: scale(.98); }
.cbtn--white { background: var(--milk); color: var(--red); }
.cbtn--white:hover { background: var(--sub); color: var(--deep); }
.cbtn--yellow { background: var(--sub); color: var(--deep); }
.cbtn--yellow:hover { background: var(--milk); }
.cbtn--ghost { box-shadow: inset 0 0 0 2px var(--milk); color: var(--milk); }
.cbtn--ghost:hover { background: var(--milk); color: var(--deep); }

.nav { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--pad); font-weight: 500; color: var(--milk); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; background: linear-gradient(180deg, rgba(24,4,6,.82), rgba(24,4,6,.62) 60%, rgba(24,4,6,0)); opacity: 0; transition: opacity .25s; }
.nav.is-dim::before { opacity: 1; }
.nav__logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--song); text-decoration: none; white-space: nowrap; text-shadow: 0 1px 10px rgba(36,6,8,.4); }
.nav__mark { width: 26px; height: 26px; fill: currentColor; }
.nav__links { display: flex; gap: clamp(14px, 2.2vw, 32px); font-size: 16px; line-height: 1; }
.nav__links a { padding: 6px 0; text-decoration: none; text-shadow: 0 1px 10px rgba(36,6,8,.55); border-bottom: 1px solid transparent; }
.nav__links a:hover { border-bottom-color: currentColor; }
.nav__end { display: flex; align-items: center; gap: 16px; font-size: 15px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 10px rgba(36,6,8,.55); }
.nav__end a { text-decoration: none; }
.nav__create { padding: 11px 16px; border-radius: 3px; background: var(--milk); color: var(--red); font-weight: 700; text-shadow: none; }
@media (max-width: 980px) { .nav__links, .nav__lang { display: none; } }

/* Opening: logo on red, the disc is a window */
.open { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--oxblood); }
.open__scene { position: absolute; inset: 0; }
.ov { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--red); display: block; pointer-events: none; }
.open__copy { position: absolute; left: var(--pad); top: 50%; z-index: 3; transform: translateY(-50%); }
.open__title { font: 900 min(6.3vw, 12.4vh)/1.14 var(--song); letter-spacing: .01em; color: var(--milk); }
.ln { display: block; overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
.ln > span { display: block; }
.open__sub { margin: clamp(14px, 3vh, 28px) 0 clamp(20px, 4vh, 36px); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.7; font-weight: 500; text-wrap: balance; }
.subtitle { position: absolute; left: 50%; bottom: clamp(26px, 7vh, 66px); z-index: 4; width: min(92vw, 1000px); transform: translateX(-50%); text-align: center; }
.subtitle__zh { text-wrap: balance; font: 600 clamp(20px, 2.5vw, 38px)/1.4 var(--song); color: var(--sub); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.6); letter-spacing: .03em; }
.subtitle__en { text-wrap: balance; margin-top: 4px; font: 500 clamp(14px, 1.3vw, 20px)/1.4 var(--song); color: var(--milk); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.7); }
.open__subtitle { visibility: hidden; }
.open__subtitle::before { content: ""; position: absolute; z-index: -1; left: -50vw; right: -50vw; bottom: calc(-1 * clamp(26px, 7vh, 66px)); height: 32vh; background: linear-gradient(0deg, rgba(24,4,6,.7), rgba(24,4,6,0)); }
@media (max-width: 819px) {
  .open__copy { left: 16px; right: 16px; top: auto; bottom: 72px; transform: none; }
  .open__title { font-size: min(12.4vw, 52px); }
  .open__sub { font-size: 16px; margin: 10px 0 18px; }
}

/* The film: scenes eaten one by one */
.film { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--deep); }
.film__scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene .fill { transform-origin: 50% 55%; }
.bitable { --a: 0px; --b: 0px; --c: 0px;
  -webkit-mask-image: radial-gradient(circle var(--a) at 84% 10%, transparent 99.6%, #000 100%), radial-gradient(circle var(--b) at 64% -3%, transparent 99.6%, #000 100%), radial-gradient(circle var(--c) at 101% 36%, transparent 99.6%, #000 100%);
  mask-image: radial-gradient(circle var(--a) at 84% 10%, transparent 99.6%, #000 100%), radial-gradient(circle var(--b) at 64% -3%, transparent 99.6%, #000 100%), radial-gradient(circle var(--c) at 101% 36%, transparent 99.6%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.film__card { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--pad); background: var(--oxblood); text-align: center; }
.film__title { font: 900 min(11.4vw, 19vh)/1.14 var(--song); color: var(--milk); letter-spacing: .01em; }
.film__title .l { display: block; white-space: nowrap; }
.film__sub { text-wrap: balance; max-width: 34em; margin-top: clamp(12px, 3vh, 26px); font-size: clamp(16px, 1.4vw, 21px); }
.toggle { position: absolute; z-index: 16; left: var(--pad); top: clamp(70px, 10vh, 92px); display: inline-flex; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,248,239,.7); background: rgba(36,6,8,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toggle button { min-width: 72px; min-height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--milk); font: 600 16px/1 var(--song); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--sub); color: var(--deep); border-radius: 3px; }
.phone { position: absolute; z-index: 15; right: clamp(16px, 9vw, 150px); top: 50%; height: min(76svh, 620px); aspect-ratio: 260/558; margin-top: calc(min(76svh, 620px) / -2); padding: .5%; border-radius: 15%/7%; background: #0b0606; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 34px 90px rgba(0,0,0,.6); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 13.5%/6.4%; overflow: hidden; background: #fafaf7; }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.phone__screen img.is-on { opacity: 1; }
.film__subs { position: absolute; z-index: 13; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(0deg, rgba(24,4,6,.78), rgba(24,4,6,.4) 46%, rgba(24,4,6,0)); }
.fsub { position: absolute; left: var(--pad); right: calc(var(--pad) + min(76svh, 620px) * .466 + 5vw); bottom: clamp(24px, 7vh, 60px); text-align: center; opacity: 0; }
.fsub__step { display: inline-block; margin-right: .5em; }
.fsub .subtitle__zh { font-size: clamp(24px, 3.1vw, 48px); line-height: 1.3; }
.fsub__desc { text-wrap: balance; margin-top: 6px; font: 500 clamp(16px, 1.45vw, 22px)/1.55 var(--song); color: var(--milk); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.75); }
.fsub .subtitle__en { font-size: clamp(13px, 1.1vw, 16px); opacity: .9; }
@media (max-width: 819px) {
  .film__title { font-size: min(15vw, 13vh); }
  .toggle { left: 16px; top: 66px; }
  .phone { right: 14px; top: 66px; height: 45svh; margin-top: 0; }
  .fsub { left: 16px; right: 16px; bottom: 26px; }
  .fsub .subtitle__zh { font-size: 26px; }
}

/* Library: a strip of film */
.reelsec { position: relative; overflow: hidden; background: var(--deep); }
.reelsec__track { display: flex; align-items: center; gap: clamp(30px, 5vw, 80px); width: max-content; min-height: 100svh; padding: 86px var(--pad) 40px; }
.reelsec__head { flex: none; width: min(84vw, 500px); }
.reelsec__head h2 { text-wrap: balance; font: 900 clamp(38px, 5.2vw, 84px)/1.2 var(--song); }
.reelsec__head p { margin: 16px 0 26px; font-size: clamp(16px, 1.4vw, 21px); }
.reel { flex: none; padding: 26px 0; background: #120304 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Crect x='11' y='6' width='22' height='14' rx='3' fill='%23fff8ef' fill-opacity='.86'/%3E%3C/svg%3E") repeat-x 0 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Crect x='11' y='6' width='22' height='14' rx='3' fill='%23fff8ef' fill-opacity='.86'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='26'%3E%3Crect x='11' y='6' width='22' height='14' rx='3' fill='%23fff8ef' fill-opacity='.86'/%3E%3C/svg%3E"); background-repeat: repeat-x, repeat-x; background-position: 0 0, 0 100%; }
.reel__row { display: flex; gap: 12px; padding: 0 14px; }
.frame { position: relative; flex: none; height: min(66svh, 640px); aspect-ratio: 9/15; margin: 0; overflow: hidden; background: #000; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame figcaption { position: absolute; left: 8px; right: 8px; bottom: 14px; z-index: 2; text-align: center; font: 600 clamp(17px, 1.4vw, 21px)/1.35 var(--song); color: var(--sub); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.8); }
@media (max-width: 819px) {
  .reelsec__track { width: auto; flex-direction: column; align-items: flex-start; padding: 80px 0 50px; min-height: 0; }
  .reelsec__head { padding: 0 16px; width: 100%; }
  .reel { width: 100vw; overflow-x: auto; scroll-snap-type: x mandatory; background-attachment: local, local; }
  .reel__row { width: max-content; }
  .frame { height: 66svh; max-height: 560px; scroll-snap-align: center; }
}

/* Rights: the trailer clearance card */
.green { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 6vw, 90px); align-items: center; min-height: 100svh; padding: clamp(84px, 13vh, 130px) var(--pad); overflow: hidden; background: var(--jade); }
.green__copy h2 { font: 900 clamp(38px, 5.4vw, 92px)/1.2 var(--song); }
.green__copy h2 .l { display: block; white-space: nowrap; }
.green__copy > p { margin: 22px 0; max-width: 33em; font-size: clamp(16px, 1.35vw, 20px); }
.green__copy ul { list-style: none; margin-bottom: 32px; max-width: 33em; }
.green__copy li { padding: 10px 0; border-top: 1px solid rgba(255,248,239,.3); font-weight: 600; }
.green__clip { position: relative; justify-self: center; width: min(78vw, 340px); margin: 0; }
.green__frame { aspect-ratio: 9/15; overflow: hidden; background: #000; }
.green__frame img { width: 100%; height: 100%; object-fit: cover; }
.green__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--sub); }
.green__cap span { width: 100%; }
.green__cap b { font-weight: 700; font-size: 18px; }
.ratecard { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(88vw, 640px); padding: clamp(22px, 3vw, 40px); background: var(--jade); box-shadow: 0 0 0 2px var(--sub), inset 0 0 0 6px var(--jade), inset 0 0 0 7px var(--sub); color: var(--sub); text-align: center; }
.ratecard__big { font: 900 clamp(66px, 11vw, 170px)/1.1 var(--song); letter-spacing: .06em; }
.ratecard__small { margin-top: 8px; font: 600 clamp(16px, 1.6vw, 24px)/1.4 var(--song); }
.ratecard__plat { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font: 700 clamp(18px, 1.8vw, 26px)/1.2 var(--song); }
@media (max-width: 819px) {
  .green { display: flex; flex-direction: column; align-items: stretch; }
  .ratecard { position: relative; left: auto; top: auto; order: -1; width: 100%; }
  .green__cap { display: none; }
  .green__clip { align-self: center; }
}

/* Founders */
.about { padding: clamp(80px, 14vh, 160px) var(--pad); background: var(--oxblood); }
.about h2 { font: 700 clamp(20px, 1.8vw, 26px)/1.3 var(--song); color: var(--milk); }
.about__mission { text-wrap: balance; max-width: 26em; margin: 16px 0 clamp(40px, 8vh, 90px); font-size: clamp(26px, 3.4vw, 54px); line-height: 1.45; text-shadow: none; }
.names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); }
.name h3 { font: 900 clamp(38px, 6vw, 104px)/1.08 var(--song); }
.name p { margin-top: 12px; max-width: 26em; font-size: clamp(16px, 1.25vw, 19px); }
@media (max-width: 760px) { .names { grid-template-columns: 1fr; } }

/* FAQ: end credits */
.credits { padding: clamp(80px, 14vh, 150px) var(--pad); background: var(--deep); text-align: center; }
.credits__title { font: 900 clamp(44px, 7vw, 120px)/1.15 var(--song); margin-bottom: 24px; }
.faq__tabs { display: inline-flex; margin-bottom: clamp(36px, 7vh, 70px); box-shadow: inset 0 0 0 1px rgba(255,248,239,.6); border-radius: 3px; }
.faq__tab { min-height: 44px; padding: 0 26px; border: 0; background: none; color: var(--milk); font: 600 16px/1 var(--song); cursor: pointer; border-radius: 3px; }
.faq__tab[aria-pressed="true"] { background: var(--sub); color: var(--deep); }
.faq__list { max-width: 1120px; margin: 0 auto; }
.faq__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(20px, 3.4vw, 54px); padding: clamp(14px, 2.4vh, 24px) 0; text-align: left; }
.faq__q { font: 700 clamp(19px, 1.7vw, 26px)/1.45 var(--song); text-align: right; color: var(--sub); }
.faq__a p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.9; }
@media (max-width: 760px) { .faq__item { grid-template-columns: 1fr; row-gap: 6px; } .faq__q { text-align: left; } }

/* Last shot: the bite closes back down to the logo */
.last { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--oxblood); }
.last__scene { position: absolute; inset: 0; }
.last__copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; text-align: center; background: linear-gradient(180deg, rgba(36,6,8,.2), rgba(36,6,8,.5)); }
.last__copy h2 { font: 900 min(9vw, 20vh)/1.18 var(--song); white-space: nowrap; text-shadow: 0 2px 30px rgba(36,6,8,.55); }
.last__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(20px, 5vh, 46px); }
.ov--last { z-index: 3; visibility: hidden; }
.last__end p { text-wrap: balance; }
.last__end { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(70px, 10vh, 96px); padding: 0 16px; text-align: center; visibility: hidden; color: var(--milk); font-size: 15px; line-height: 1.7; }
.last__name { font: 900 clamp(26px, 3vw, 42px)/1.2 var(--song); margin-bottom: 6px; }
.last__legal { opacity: .82; font-size: 13px; }

/* Reduced motion */
.rm .open__subtitle { display: none; }
.rm .film { height: auto; overflow: visible; }
.rm .film__scenes { position: relative; display: grid; }
.rm .scene { position: relative; height: 56vh; }
.rm .film__card { position: relative; min-height: 70vh; }
.rm .phone { display: none; }
.rm .film__subs { position: relative; height: auto; display: grid; gap: 22px; padding: 40px var(--pad); }
.rm .fsub { position: relative; left: 0; right: 0; bottom: 0; opacity: 1; }
.rm .ratecard { position: relative; left: auto; top: auto; grid-column: 1 / -1; justify-self: center; }
.rm .last { height: auto; min-height: 100svh; display: grid; }
.rm .last__copy { position: relative; min-height: 70vh; }
.rm .last__end { position: relative; bottom: auto; visibility: visible; padding: 40px 16px; background: var(--red); }
.rm .ov--last { display: none; }