/* =========================================================
   C — Cinematic Illusion Machine
   near-black, warm ivory, curtain red; audience first, then backstage
   ========================================================= */
[data-theme='cinema'] {
  --bg: #0d0b0a; --bg-2: #15110f; --paper: #171310; --paper-2: #1f1915;
  --ink: #efe6d2; --ink-2: #c4b8a0; --ink-3: #9d917b;
  --accent: #a3161f; --accent-ink: #fff4e4; --accent-text: #f08a7c;
  --gold: #e3c27a;
  --line: rgba(239, 230, 210, .16); --line-strong: rgba(239, 230, 210, .45);
  --focus: #f4d35e;
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-label: 'Jost', system-ui, sans-serif;
  --font-hand: 'Jost', system-ui, sans-serif;
  --radius: 10px;
  --shadow: 0 20px 40px -18px rgba(0, 0, 0, .9);
  --shadow-lift: 0 30px 60px -20px rgba(0, 0, 0, .95);
  color-scheme: dark;
}
[data-theme='cinema'] body { background: radial-gradient(120% 60% at 50% 0%, #1b1512, #0d0b0a 60%) fixed; }
[data-theme='cinema'] .eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .22em; }
[data-theme='cinema'] .btn { font-weight: 700; letter-spacing: .14em; border-radius: 999px; padding-inline: 1.4em; }
[data-theme='cinema'] .btn--primary { --b-bg: var(--ink); --b-fg: #120f0d; --b-bd: var(--ink); }
[data-theme='cinema'] .btn--primary:hover { box-shadow: 0 0 0 4px rgba(239, 230, 210, .18), 0 0 40px rgba(255, 230, 180, .25); }
[data-theme='cinema'] .btn--ink { --b-bg: var(--accent); --b-fg: #fff4e4; --b-bd: var(--accent); }
[data-theme='cinema'] .brand__name { font-family: 'Marcellus', serif; font-weight: 700; }
[data-theme='cinema'] .brand__mark { color: var(--gold); }
[data-theme='cinema'] .primary__exps a, [data-theme='cinema'] .primary__util > a { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: .06em; }
[data-theme='cinema'] .primary__n { color: var(--gold); }
[data-theme='cinema'] .primary a[aria-current='page'] { background: var(--ink); color: #120f0d; border-radius: 999px; }
[data-theme='cinema'] .display, [data-theme='cinema'] .reflect__q { text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
[data-theme='cinema'] .masthead { background: rgba(13, 11, 10, .82); }
[data-theme='cinema'] textarea, [data-theme='cinema'] input[type='text'], [data-theme='cinema'] select { background: #120f0d; border-radius: 6px; }
[data-theme='cinema'] .reflect { border-radius: 10px; background: linear-gradient(180deg, #19140f, #120f0d); }
[data-theme='cinema'] .colophon__thesis { text-transform: uppercase; font-weight: 700; font-size: 1.2rem; }
[data-theme='cinema'] .tag-gen { background: var(--gold); color: #120f0d; }
[data-theme='cinema'] kbd { background: #1f1915; }

/* ---------------- landing: the theater ---------------- */
.ci-theater { position: relative; min-height: min(920px, calc(100vh - 68px)); overflow: hidden; isolation: isolate; background: radial-gradient(60% 50% at 62% 40%, #2a221c, #0b0908 70%); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 120px clamp(70px, 10vw, 170px) 220px clamp(90px, 12vw, 200px); }
.ci-valance { position: absolute; top: 0; left: 0; right: 0; height: 92px; z-index: 6; background: repeating-linear-gradient(90deg, #5c0c12 0 18px, #8f1820 18px 30px, #6d1017 30px 44px); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.ci-valance::after { content: ''; position: absolute; left: 0; right: 0; bottom: -26px; height: 28px; background: radial-gradient(circle at 50% 0, #6d1017 0 26px, transparent 27px) 0 0 / 70px 28px repeat-x; }
.ci-valance::before { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 6px; background: repeating-linear-gradient(90deg, #e3c27a 0 6px, #9a7a3c 6px 12px); opacity: .7; }
.ci-curtain { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 5; background: repeating-linear-gradient(90deg, #4c0a0f 0 22px, #8a1820 22px 36px, #6a1016 36px 52px, #9a2028 52px 60px, #55090f 60px 74px); box-shadow: inset 0 -200px 160px -60px rgba(0,0,0,.75), 0 0 60px rgba(0,0,0,.8); transition: transform 2.2s cubic-bezier(.6, 0, .15, 1); }
.ci-curtain--l { left: 0; transform-origin: 0 0; }
.ci-curtain--r { right: 0; transform-origin: 100% 0; }
.ci-theater.is-open .ci-curtain--l { transform: translateX(-90%); }
.ci-theater.is-open .ci-curtain--r { transform: translateX(90%); }
.ci-text { position: relative; z-index: 4; }
.ci-text h1 { font-family: 'Marcellus', serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: .92; letter-spacing: -.005em; }
.ci-text .deck { font-family: 'Jost', sans-serif; letter-spacing: .24em; text-transform: uppercase; font-size: .82rem; color: var(--gold); margin-bottom: 1.2rem; font-weight: 700; }
.ci-text p.lede { color: var(--ink-2); margin: 1.4rem 0 1.8rem; max-width: 40ch; font-size: 1.15rem; }
.ci-screen { position: relative; z-index: 3; aspect-ratio: 810 / 550; background: #000; box-shadow: 0 0 0 10px #1a1411, 0 0 0 12px #3a2b1f, 0 40px 100px rgba(0,0,0,.8), 0 0 140px rgba(255, 228, 170, .1); overflow: hidden; }
.ci-screen img { width: 100%; height: 100%; object-fit: cover; scale: 1.1; filter: sepia(.25) contrast(1.08) brightness(1.02); }
.ci-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.ci-screen__grain { position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; pointer-events: none; mix-blend-mode: screen; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(6%, -6%); } 60% { transform: translate(-4%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }
.ci-beam { position: absolute; z-index: 2; left: 50%; bottom: -10%; width: 140%; height: 120%; transform: translateX(-30%); background: conic-gradient(from -14deg at 50% 100%, transparent 0deg, rgba(255, 236, 190, .07) 4deg, rgba(255, 236, 190, .13) 9deg, rgba(255, 236, 190, .05) 18deg, transparent 22deg); pointer-events: none; mix-blend-mode: screen; }
.ci-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ci-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px 320px at var(--sx, 30%) var(--sy, 50%), rgba(255, 226, 170, .09), transparent 70%); }
.ci-seats { position: absolute; z-index: 7; left: -2%; right: -2%; bottom: 0; height: 190px; pointer-events: none; }
@media (max-width: 960px) {
  .ci-theater { grid-template-columns: 1fr; padding: 110px var(--gutter) 160px; }
  .ci-seats { height: 120px; }
  .ci-curtain { width: 54%; }
}

.ci-section { padding: clamp(3.5rem, 8vw, 7rem) 0 0; }
.ci-head { text-align: center; margin-bottom: 2rem; }
.ci-head h2 { font-family: 'Marcellus', serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; margin-top: .6rem; }
.ci-head p { color: var(--ink-2); max-width: 56ch; margin: .8rem auto 0; }
.ci-ornament { display: block; width: 180px; margin: .9rem auto 0; color: var(--gold); }

/* the program: a reel selector */
.ci-program { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ci-strip { background: #090706; padding: 22px 0; position: relative; box-shadow: var(--shadow-lift); }
.ci-strip::before, .ci-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2b231d 10px 22px, transparent 22px 30px); }
.ci-strip::before { top: 5px; } .ci-strip::after { bottom: 5px; }
.ci-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px; }
.ci-frame { position: relative; aspect-ratio: 4 / 3; border: 0; padding: 0; background: #000; overflow: hidden; outline-offset: 4px; }
.ci-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.35) brightness(.55); transition: filter .5s, transform .8s var(--ease-out); }
.ci-frame span { position: absolute; left: 8px; bottom: 6px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 6px #000; }
.ci-frame:hover img, .ci-frame[aria-pressed='true'] img { filter: grayscale(.2) sepia(.3) brightness(1); transform: scale(1.05); }
.ci-frame[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--gold); }
.ci-card { position: relative; background: #0a0807; border: 1px solid rgba(227, 194, 122, .45); padding: clamp(1.6rem, 3.5vw, 2.8rem); text-align: center; min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.ci-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(227, 194, 122, .25); pointer-events: none; }
.ci-card__reel { font-family: 'Jost', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-size: .82rem; font-weight: 700; }
.ci-card h3 { font-family: 'Marcellus', serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; margin: .7rem 0 .2rem; }
.ci-card h4 { font-family: 'Lora', serif; font-weight: 500; font-size: 1.2rem; color: var(--ink-2); }
.ci-card p { margin: 1rem auto 1.5rem; max-width: 40ch; color: var(--ink-2); }
.ci-card.is-swap { animation: card-in .55s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@media (max-width: 900px) { .ci-program { grid-template-columns: 1fr; } }

/* audience ↔ backstage teaser */
.ci-stagebox { position: relative; perspective: 1400px; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; background: radial-gradient(70% 70% at 50% 40%, #241c16, #0a0807 75%); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lift); }
.ci-stage3d { position: absolute; width: 68%; aspect-ratio: 3 / 2; left: 16%; top: 9%; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier(.5, 0, .1, 1); }
.ci-stagebox.is-back .ci-stage3d { transform: rotateY(-36deg) rotateX(8deg) scale(.74) translateX(8%); }
.ci-flat { position: absolute; inset: 0; transform: translateZ(0); transition: transform 1.4s cubic-bezier(.5, 0, .1, 1), box-shadow .6s; transform-style: preserve-3d; }
.ci-flat img { position: absolute; }
.ci-stagebox.is-back .ci-flat { transform: translateZ(calc(var(--i) * 42px)); box-shadow: 0 0 0 1px rgba(227, 194, 122, .35); }
.ci-flat__label { position: absolute; left: 0; top: -1.6rem; font-family: 'Jost', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; opacity: 0; transition: opacity .5s .6s; }
.ci-stagebox.is-back .ci-flat__label { opacity: 1; }
.ci-stage-ctrl { display: flex; justify-content: center; gap: .5rem; margin-top: 1.2rem; }

/* six-stage reel */
.ci-reel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: #090706; padding: 26px 12px; position: relative; }
.ci-reel::before, .ci-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2b231d 10px 22px, transparent 22px 30px); }
.ci-reel::before { top: 7px; } .ci-reel::after { bottom: 7px; }
.ci-reel li { display: grid; gap: .5rem; }
.ci-reel__f { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.ci-reel__f > * { position: absolute; }
.ci-reel__t { font-family: 'Jost', sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ci-reel__t b { color: var(--gold); margin-right: .3em; }
@media (max-width: 860px) { .ci-reel { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } }

.ci-fin { color: var(--ink); margin: clamp(4rem, 8vw, 7rem) auto 0; max-width: 980px; text-align: center; border: 1px solid rgba(227, 194, 122, .45); padding: clamp(2rem, 5vw, 4rem); position: relative; background: #0a0807; }
.ci-fin::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(227, 194, 122, .2); }
.ci-fin blockquote { margin: 0; font-family: 'Marcellus', serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.2; }
.ci-fin__fin { font-family: 'Marcellus', serif; font-weight: 800; font-size: 1.2rem; letter-spacing: .5em; color: var(--gold); margin-top: 1.6rem; }

/* Marcellus titling + Lora reading + Jost (Futura-era) labels */
[data-theme='cinema'] body { font-size: 1.08rem; }
[data-theme='cinema'] :is(.ci-text h1, .ci-head h2, .ci-card h3, .xp-head__title, .display, .reflect__q, .cp-q, .ci-fin blockquote) { font-weight: 400; letter-spacing: .02em; }
[data-theme='cinema'] .ci-text h1 { font-size: clamp(2.4rem, 4.8vw, 4.6rem); line-height: 1; }
[data-theme='cinema'] .ci-fin blockquote { text-transform: none; line-height: 1.3; }
[data-theme='cinema'] .eyebrow, [data-theme='cinema'] .btn { font-weight: 600; letter-spacing: .14em; }
@media (max-width: 960px) {
  .ci-theater { padding-left: max(var(--gutter), 7vw); padding-right: max(var(--gutter), 7vw); }
  .ci-theater.is-open .ci-curtain--l { transform: translateX(-96%); }
  .ci-theater.is-open .ci-curtain--r { transform: translateX(96%); }
}