/* The first screen, after the cinematic pattern: a black band with a
   floating pill of navigation, a painting fading in beneath it, a thin serif
   wordmark set dead centre, tracked capitals for the small print, outline
   pill buttons, and a fade at the foot of the picture into the page's own
   paper. Everything below the fold keeps the Sunrise and glass themes. */
:root{--cine-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--cine-ink:#fff6ea;--cine-dim:rgba(255,246,234,.72);--cine-black:#0b0705}
/* on the page's own paper the text uses the site ink */
:root{--cine-fg:var(--ink);--cine-fg-2:var(--ink-2);--cine-fg-3:var(--ink-3)}

/* light glass pill navigation on the paper; dark glass in dark mode */
:root{--pill-bg:rgba(255,255,255,.74);--pill-edge:rgba(255,255,255,.85);--pill-div:rgba(15,23,42,.12);--pill-fg:var(--ink-3);--pill-fg-on:var(--ink);--pill-on:rgba(15,23,42,.07);--pill-shadow:rgba(15,23,42,.28)}
:root[data-theme="dark"]{--pill-bg:rgba(11,18,32,.66);--pill-edge:rgba(255,255,255,.14);--pill-div:rgba(255,255,255,.16);--pill-fg:rgba(230,237,247,.72);--pill-fg-on:#e6edf7;--pill-on:rgba(255,255,255,.08);--pill-shadow:rgba(0,0,0,.75)}
header.top{border-color:var(--pill-edge);background-color:var(--pill-bg);background-image:none;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 44px -24px var(--pill-shadow),inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="dark"] header.top{box-shadow:0 18px 44px -22px var(--pill-shadow),inset 0 1px 0 rgba(255,255,255,.12)}
nav.main a{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pill-fg);padding:8px 10px;border-bottom:0;white-space:nowrap}
nav.main a:hover,nav.main a.active{color:var(--pill-fg-on);background:var(--pill-on);border-bottom:0}
nav.main a::after{display:none}
.ccy-btn,.theme-btn{background:var(--pill-on);background-image:none;border-color:var(--pill-div);color:var(--pill-fg-on);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ccy-btn:hover,.theme-btn:hover{background:rgba(15,23,42,.12);border-color:rgba(15,23,42,.2)}
[data-theme="dark"] .ccy-btn:hover,[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.ccy-cur{color:var(--pill-fg-on)}
#connect.btn{background:var(--ink);background-image:none;color:var(--paper);border-color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;box-shadow:none}
#connect.btn:hover{background:var(--chroma);border-color:var(--chroma);color:#fff}
@media (min-width:981px){
  header.top{left:50%;right:auto;top:16px;transform:translateX(-50%);width:auto;max-width:calc(100vw - 32px);border-radius:999px;border-width:1px}
  html.has-notice header.top{top:calc(var(--notice-h,56px) + 12px)}
  header.top .wrap{width:auto;max-width:none;height:52px;padding:0 8px 0 18px;gap:4px}
  .brand{margin-right:12px;padding-right:16px;border-right:1px solid var(--pill-div)}
  .brand-logo{width:26px;height:26px}
  .hdr-right{gap:6px;margin-left:10px}
}
@media (max-width:980px){
  header.top{border-bottom:1px solid var(--pill-div)}
  nav.main a{font-size:10px;padding:7px 9px}
}

/* the screen: the page's own paper, text set dead centre, sized so the
   whole run from the wordmark to the last button fits one viewport */
.cine{position:relative;z-index:1;box-sizing:border-box;min-height:100vh;min-height:100svh;margin:-64px 0 0;padding:84px 0 36px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--cine-fg);background:transparent}
.cine-mark{display:block;width:clamp(76px,8.5vw,108px);height:auto;margin:0 auto 18px;filter:drop-shadow(0 14px 34px rgba(56,189,248,.28))}
.cine-kicker{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cine-fg)}
.cine-kicker2{margin-top:6px;font-family:var(--font-sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cine-fg-3)}
.cine-word{margin:14px 0 0;font-family:var(--cine-serif);font-weight:300;font-size:clamp(64px,9.5vw,136px);line-height:.92;letter-spacing:-.01em;color:var(--cine-fg)}
.cine-sub{max-width:560px;margin:18px auto 0;font-family:var(--cine-serif);font-weight:400;font-size:clamp(18px,1.45vw,21px);line-height:1.32;color:var(--cine-fg-2)}
.cine .cine-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:13px 30px;border:1px solid var(--cine-fg);border-radius:999px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cine-fg);
  background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s ease,color .2s ease,border-color .2s ease}
[data-theme="dark"] .cine .cine-btn{background:rgba(255,255,255,.06)}
.cine .cine-btn:hover{background:var(--cine-fg);color:var(--paper);border-color:var(--cine-fg)}
.cine-pill{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:9px 16px;border:1px solid var(--rule-strong);border-radius:999px;
  background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cine-fg-3)}
[data-theme="dark"] .cine-pill{background:rgba(255,255,255,.06)}
.cine-pill b{color:var(--cine-fg);font-weight:600}
.cine-pill i{font-style:normal;opacity:.5}
.cine-statement{margin:40px auto 0;max-width:760px;font-family:var(--cine-serif);font-weight:400;font-size:clamp(34px,3.9vw,56px);line-height:1;letter-spacing:-.01em;color:var(--cine-fg)}
.cine-statement span{display:block;margin:12px auto 0;max-width:640px;font-size:clamp(17px,1.55vw,23px);line-height:1.3;color:var(--cine-fg-2)}
.cine-credit{display:none}

/* arrival */
.cine>*{opacity:0;animation:cine-up .9s cubic-bezier(.22,1,.36,1) forwards}
.cine>*:nth-child(2){animation-delay:.08s}.cine>*:nth-child(3){animation-delay:.16s}.cine>*:nth-child(4){animation-delay:.28s}
.cine>*:nth-child(5){animation-delay:.38s}.cine>*:nth-child(6){animation-delay:.46s}.cine>*:nth-child(7){animation-delay:.6s}.cine>*:nth-child(8){animation-delay:.7s}.cine>*:nth-child(9){animation-delay:.8s}.cine>*:nth-child(10){animation-delay:.9s}
@keyframes cine-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cine>*{animation:none;opacity:1}}

/* the sections after the screen */
.cine + .block{padding-top:8px}
@media (max-width:760px){
  .cine-mark{width:64px;margin-bottom:12px}
  .cine{padding:96px 0 40px;min-height:0;justify-content:flex-start}
  .cine-word{font-size:clamp(56px,18vw,96px)}
  .cine-statement{margin-top:40px}
  .cine-pill{flex-wrap:wrap;justify-content:center;gap:8px 12px}
}
/* dark only: no theme toggle */
.theme-btn{display:none!important}
/* short desktop viewports (768 to 820 px tall): keep the whole first screen visible */
@media (min-width:761px) and (max-height:820px){
  .cine{padding-top:74px;padding-bottom:24px}
  .cine-mark{width:clamp(64px,6.5vw,80px);margin-bottom:10px}
  .cine-word{font-size:clamp(56px,7.8vw,108px);margin-top:10px}
  .cine-sub{margin-top:12px}
  .cine .cine-btn{margin-top:16px;padding:11px 26px}
  .cine-pill{margin-top:12px}
  .cine-statement{margin-top:22px;font-size:clamp(30px,3.3vw,46px)}
}