/* oc/cine-content.css, the cinematic content pages (2026-10-12, LOCAL ONLY): /work/, /work/<slug>/,
   /blog/, /blog/<slug>/, /contact/. Loaded after oc/cine.css. Only the custom content these pages
   put inside a Cine.Block (the work grid, case-study extras, article cards and body, the brief
   form, the Calendly embed). Same palette and type as the kit: --ink/--body/--muted/--line from
   .hs, Manrope headings, Inter body, JetBrains Mono labels. Below 900px everything stacks. */

.cine-content .hs-kicker { margin-bottom: 14px; }

/* ── /work/: filter bar + grid (the old WorkPage grid, restyled) ─────────── */
.cw-bar {
  position: sticky; top: 64px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; margin: 0 0 40px; border-bottom: 1px solid var(--line);
  background: var(--oc-overlay-85, rgba(250,250,247,0.85)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cw-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-filter {
  font: 500 11.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; transition: border-color .25s, color .25s, background .25s;
}
.cw-filter:hover { border-color: var(--line-2); color: var(--ink); }
.cw-filter[aria-pressed="true"] { border-color: var(--ink); color: #FAFAF7; background: var(--ink); }
.cw-count { font: 500 11.5px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.cw-card { display: block; color: inherit; text-decoration: none; }
.cw-cover {
  position: relative; height: 470px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s;
}
.cw-card:hover .cw-cover { transform: translateY(-6px); border-color: var(--line-2); }
.cw-shot { position: absolute; left: 16px; right: 16px; top: 14px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cw-card:hover .cw-shot { transform: translateY(-5px) scale(1.014); }
.cw-shot svg { display: block; width: 100%; height: auto; }
.cw-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 46%, var(--oc-overlay, rgba(250,250,247,0.95)) 62%, var(--oc-overlay, rgba(250,250,247,0.95))); }
.cw-meta { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.cw-tag { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.cw-name { margin: 12px 0 8px; font: 700 clamp(1.8rem, 2.6vw, 2.6rem)/1.05 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--ink); }
/* the meta block sits over the cover, so its height stays predictable (3-line clamp) */
.cw-blurb { margin: 0; max-width: 480px; font-size: 14.5px; line-height: 1.55; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cw-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cw-foot .hs-link { font: 600 14px 'Inter', sans-serif; letter-spacing: 0; text-transform: none; }
.cine-content .oc-store-link:hover { background: var(--oc-nav-item-hover); border-color: var(--ink) !important; }

/* ── /work/<slug>/ ───────────────────────────────────────────────────────── */
.cd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 30px 0 0; max-width: 34em; }
.cd-meta div { border-top: 1px solid var(--line-2); padding-top: 10px; }
.cd-meta dt { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cd-meta dd { margin: 6px 0 0; font: 600 15px/1.4 'Inter', sans-serif; color: var(--ink); }
.cd-product { padding-top: clamp(72px, 10vh, 120px); }
.cd-gallery { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; max-width: 820px; margin: 0 0 56px; }
.cd-gallery.is-web { max-width: none; gap: 24px; }
.cd-gallery img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(10,10,15,0.10); background: var(--tint); }
.cd-where .hs-kicker { margin-bottom: 18px; }
.cine-content #metrics .hs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.cine-content #metrics .hs-stat dd { font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.cd-pn-sec { padding: clamp(56px, 8vh, 88px) 0; }
.cd-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: end; }
.cd-pn a { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.cd-pn span { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cd-pn strong { font: 700 clamp(1.3rem, 2vw, 1.8rem)/1.1 'Manrope', sans-serif; letter-spacing: -0.02em; transition: color .25s; }
.cd-pn a:hover strong { color: #7C3AED; }
.cd-pn .cd-pn-all { align-items: center; text-align: center; }
.cd-pn .cd-pn-all strong { font-size: 1rem; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }
.cd-pn .cd-pn-next { align-items: flex-end; text-align: right; }

/* ── /blog/: featured + grid (BlogCover cards) ──────────────────────────── */
.cj-card { display: block; color: inherit; text-decoration: none; }
.cj-card.is-teaser { opacity: 0.55; pointer-events: none; }
.cj-cover { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.cj-cover > * { display: block; width: 100%; }
a.cj-card:hover .cj-cover { transform: translateY(-5px); border-color: var(--line-2); }
.cj-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 18px 0 0; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cj-cat { color: #DB2777; }
.cj-soon { color: var(--faint); }
.cj-title { margin: 12px 0 8px; font: 700 clamp(1.3rem, 1.9vw, 1.7rem)/1.15 'Manrope', sans-serif; letter-spacing: -0.02em; color: var(--ink); }
a.cj-card:hover .cj-title { color: #7C3AED; }
.cj-blurb { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.cj-read { margin: 28px 0 0; font: 600 15px 'Inter', sans-serif; color: var(--ink); }
.cj-card.is-featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin: 0 0 72px; padding: 0 0 72px; border-bottom: 1px solid var(--line); }
.cj-card.is-featured .cj-meta { margin-top: 0; }
.cj-card.is-featured .cj-title { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; margin: 18px 0 18px; }
.cj-card.is-featured .cj-blurb { font-size: 17px; }
.cj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.cj-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── /blog/<slug>/: the article as a calm reading column ────────────────── */
.cb-byline { margin: 18px 0 0; font: 500 11.5px 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cb-sec { padding-top: clamp(56px, 8vh, 96px); }
.cb-cover { max-width: 760px; margin: 0 auto 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.cb-cover > * { display: block; width: 100%; }
.cb-article { max-width: 720px; margin: 0 auto; font: 400 18px/1.75 'Inter', sans-serif; color: var(--body); }
.cb-article p { margin: 0 0 24px; }
.cb-article h2 { margin: 64px 0 18px; font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 'Manrope', sans-serif; letter-spacing: -0.025em; color: var(--ink); }
.cb-article h3 { margin: 40px 0 12px; font: 700 clamp(1.25rem, 1.7vw, 1.45rem)/1.25 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--ink); }
.cb-article ul, .cb-article ol { margin: 8px 0 28px; padding-left: 24px; }
.cb-article li { margin: 0 0 10px; padding-left: 4px; }
.cb-article li::marker { color: #8B5CF6; }
.cb-article blockquote { margin: 44px 0; padding: 4px 0 4px 28px; border-left: 2px solid #8B5CF6; font: 600 clamp(1.25rem, 1.8vw, 1.5rem)/1.45 'Manrope', sans-serif; letter-spacing: -0.01em; color: var(--ink); }
.cb-article > :first-child { margin-top: 0; }

/* ── /contact/: brief form + direct lines + Calendly ────────────────────── */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.cc-field { display: block; }
.cc-field.is-full { grid-column: 1 / -1; }
.cc-field > span { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cc-field input, .cc-field textarea {
  display: block; width: 100%; margin-top: 8px; padding: 14px 16px; box-sizing: border-box;
  font: 400 15px 'Inter', sans-serif; color: var(--ink); background: #FFFFFF;
  border: 1px solid var(--line-2); border-radius: 10px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.cc-field textarea { resize: vertical; min-height: 120px; }
.cc-field input:focus, .cc-field textarea:focus { border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,0.14); }
.cc-budget { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cc-budget > span { margin-right: 6px; font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cc-budget button {
  font: 500 11.5px 'JetBrains Mono', monospace; letter-spacing: 0.06em; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.cc-budget button:hover { border-color: var(--ink); }
.cc-budget button[data-sel="1"] { background: var(--ink); color: #FAFAF7; border-color: var(--ink); }
.cc-submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 12px; }
.cc-submit button { border: 0; cursor: pointer; font-family: 'Inter', sans-serif; }
.cc-submit > span { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cc-direct dl { margin: 18px 0 0; }
.cc-direct dl div { border-top: 1px solid var(--line); padding: 16px 0; }
.cc-direct dt { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cc-direct dd { margin: 6px 0 0; font: 700 clamp(1.1rem, 1.5vw, 1.35rem)/1.3 'Manrope', sans-serif; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.cc-direct dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; }
.cc-direct dd a:hover { border-color: #8B5CF6; }
.cc-hq { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--tint); }
.cc-hq .hs-kicker { margin-bottom: 8px; }
.cc-hq strong { display: block; font: 700 1.5rem/1.2 'Manrope', sans-serif; letter-spacing: -0.02em; }
.cc-hq p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cc-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cc-book .hs-lede { margin-top: 0; }
.cc-cal { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #FAFAF7; }
.cc-cal iframe { display: block; width: 100%; height: 700px; border: 0; }

/* ── below 900px: static stacked layout (as the kit) ─────────────────────── */
@media (max-width: 1080px) {
  .cw-cover { height: 430px; }
  .cj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .cw-bar { position: static; }
  .cw-grid, .cj-grid, .cj-grid-2 { grid-template-columns: 1fr; }
  /* the preview scales with card width, so flip to flow layout or a dead gap opens (CLAUDE.md §9.4) */
  .cw-cover { height: auto; }
  .cw-shot { position: relative; left: auto; right: auto; top: auto; padding: 14px 14px 0; }
  .cw-scrim { display: none; }
  .cw-meta { position: static; padding: 18px 20px 22px; }
  .cj-card.is-featured { grid-template-columns: 1fr; margin-bottom: 48px; padding-bottom: 48px; }
  .cd-pn { grid-template-columns: 1fr 1fr; }
  .cd-pn .cd-pn-all { display: none; }
  .cine-content #metrics .hs-stats { grid-template-columns: 1fr; }
  .cc-grid, .cc-book { grid-template-columns: 1fr; }
  .cb-article { font-size: 17px; }
}
@media (max-width: 560px) {
  .cd-meta, .cc-form { grid-template-columns: 1fr; }
  .cd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cd-gallery.is-web { grid-template-columns: 1fr; }
}

/* phones in motion (< 900px): the case-study facts sit inside the pinned hero */
@media (max-width: 899px) {
  .hs-motion .cd-meta { margin-top: 16px; gap: 10px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-motion .cd-meta div { padding-top: 6px; }
  .hs-motion .cd-meta dd { font-size: 13.5px; margin-top: 3px; }
  .hs-motion .cb-byline { margin-top: 12px; }
}