/* oc/cine.css, the cinematic inner pages (oc/cine-kit.js), loaded AFTER oc/home-cinematic.css.
   The homepage stylesheet supplies the whole visual language (.hs-*, .st-*, .seq-*); this file
   only adds what the kit's extra sections need. Same split as the homepage: base rules are the
   static readable page (no JS, reduced motion, prerender, phones for now), .hs-motion rules are
   the pinned desktop sequences added by oc/cine-motion.js. */

.cine-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hs:not(.hs-motion) .b-frame.is-off { display: none; }

/* breadcrumbs above the hero kicker */
.cine-crumbs { margin: 0 0 22px; }
.cine-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; }
.cine-crumbs li { font: 500 11.5px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cine-crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--faint); }
.cine-crumbs a { color: var(--muted); text-decoration: none; }
.cine-crumbs a:hover { color: var(--ink); }
.cine-crumbs [aria-current] { color: var(--ink); }

/* hero: inner-page H1s run longer than the homepage's, so size them a step down */
.cine-h1 { font-size: clamp(2.6rem, 5vw, 5.4rem); }
.hs-motion .cine-hero .st-ch-0 .cine-h1 { font-size: clamp(2.4rem, 3.6vw, 4.3rem); }
.hs-motion .cine-hero .st-h2 { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.cine-hero .hs-lede { max-width: 32em; }
.cine-list { margin-top: 22px; }
.cine-list .st-layer { grid-template-columns: 30px minmax(110px, 170px) 1fr; }
.hs-motion .cine-hero .st-copy { min-height: 0; }

/* morph sequences: lede inside a chapter */
.cine-intro { max-width: 40em; }
.cine-morph .b-blurb { max-width: 34em; }
.cine-morph .hs-tags { margin-bottom: 0; }

/* the frame is hidden in a chapter with no frame (motion sets autoAlpha) */
.cine-draw .d-hi { stroke: url(#hs-grad); stroke-width: 1.6; }
.cine-draw .d-hi-dot { stroke: url(#hs-grad); stroke-width: 2; fill: var(--oc-bg, #FAFAF7); }
.cine-draw .d-red { fill: #E5484D; }
.cine-draw ellipse.ln { fill: none; }

/* Grid: columns of short lists */
.cine-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 40px 32px; }
.cine-col { border-top: 1px solid var(--ink); padding-top: 20px; }
.cine-col-label { margin: 0 0 14px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #7C3AED; }
.cine-col-title { margin: 0 0 10px; font: 700 clamp(1.2rem, 1.6vw, 1.45rem)/1.2 'Manrope', sans-serif; letter-spacing: -0.02em; }
.cine-col-body { margin: 0 0 14px; color: var(--body); line-height: 1.6; font-size: 15px; }
.cine-col ul { list-style: none; margin: 0 0 14px; padding: 0; }
.cine-col li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }

/* Steps: optional item lists under each phase */
.cine-step-items { list-style: none; margin: 14px 0 0; padding: 0; }
.cine-step-items li { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); }

/* Faq */
.cine-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cine-faq-grid .seq-head { position: sticky; top: 120px; }
.cine-faq-list { margin: 0; }
.cine-faq-item { border-top: 1px solid var(--line-2); padding: 26px 0 28px; }
.cine-faq-item dt { display: grid; grid-template-columns: 44px 1fr; font: 700 clamp(1.1rem, 1.5vw, 1.3rem)/1.35 'Manrope', sans-serif; letter-spacing: -0.015em; }
.cine-faq-item dd { margin: 12px 0 0 44px; color: var(--body); line-height: 1.65; }

/* Block: custom content */
.cine-narrow { max-width: 880px; }
.cine-block .seq-head { margin-bottom: clamp(36px, 6vh, 64px); }

/* Showcase: a drawn cover when a product has no screenshots */
.cine-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6%; }
.cine-cover > * { width: 100%; height: auto; max-height: 100%; }
.cine-cover svg { display: block; }

/* below 900px: static layout for now (mobile animation follows desktop sign-off, as on `/`) */
@media (max-width: 899px) {
  .cine-grid { grid-template-columns: 1fr 1fr; }
  .cine-faq-grid { grid-template-columns: 1fr; }
  .cine-faq-grid .seq-head { position: static; }
  .cine-list .st-layer { grid-template-columns: 26px 1fr; }
  .cine-list .st-layer span:last-child { grid-column: 2; }
  .hs-phases ol { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .cine-grid { grid-template-columns: 1fr; }
  .cine-faq-item dd { margin-left: 0; }
  .cine-faq-item dt { grid-template-columns: 34px 1fr; }
}

/* long proof headlines on the stats band */
.cine-stats .hs-h2 { font-size: clamp(1.8rem, 3vw, 3rem); max-width: 24em; }
.cine-draw .d-sm { font-size: 12.5px; letter-spacing: 0.06em; }

/* phones in motion (< 900px): the kit's hero and lists on the stacked stage (home-cinematic.css) */
@media (max-width: 899px) {
  .hs-motion .cine-hero .st-ch-0 .cine-h1 { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  .hs-motion .cine-hero .st-h2 { font-size: clamp(1.65rem, 7.2vw, 2.25rem); }
  .hs-motion .cine-crumbs { margin-bottom: 12px; }
  .hs-motion .cine-list { margin-top: 12px; }
  .hs-motion .cine-list .st-layer { grid-template-columns: 26px minmax(0, 1fr); }
  .hs-motion .cine-list .st-layer span:last-child { grid-column: 2; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .hs-motion .cine-hero .st-ch-0 .cine-h1 { font-size: clamp(1.8rem, 7.8vw, 2.3rem); }
  .hs-motion .cine-hero .st-h2 { font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
  .hs-motion .cine-list .st-layer span:last-child { display: none; }
  .hs-motion .cine-crumbs { margin-bottom: 8px; }
}