/* Cinnematic design tokens. Source of truth: design/tokens.css.
   The site serves the same file at /v3/assets/tokens.css (keep them identical). */


:root{
  /* colour: the Cinnematic brand sheet. Ink, Ivory, Graphite, Mist. Red only as the render light. */
  --paper:#FDFDFB;      /* page */
  --paper-up:#FFFFFF;   /* raised surface: plan card, panel */
  --wash:#F3F3F0;       /* soft button, top bar, input fill */
  --wash-2:#E8E8E4;     /* soft button hover */
  --line:#E8E8E4;       /* hairlines */
  --line-2:#D4D4CF;     /* label rule, stronger hairline */
  --ink:#0B0B0C;        /* headings, body on paper */
  --ink-2:#2B2B29;      /* secondary text */
  --mute:#5F5F5B;       /* lede, descriptions */
  --faint:#9B9B96;      /* labels, meta */
  --btn:#0B0B0C;        /* primary button */
  --btn-h:#2B2B29;
  --on-btn:#FDFDFB;
  --tally:#D23B2E;      /* the only accent: rendering / recording light. Never decoration. */
  --ok:#2F7A55;         /* ready state text */
  --dot:95,95,91;      /* dot-field rgb (used in canvas) */
  --scrim:rgba(10,12,20,.55);

  /* type */
  --display:"Urbanist",system-ui,sans-serif;
  --text:"Inter Tight",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --fs-meta:12px;   /* labels, meta, footnotes */
  --fs-small:13.5px;/* descriptions, nav */
  --fs-body:15px;
  --fs-lede:15.5px;
  --fs-h3:17px;
  --fs-h2:23px;
  --fs-h2-xl:28px;
  --fs-h1:54px;
  --fs-h1-m:38px;
  --lh-tight:1.14;
  --lh-head:1.3;
  --lh-body:1.6;
  --track-display:-.022em;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:120px;
  --wrap:930px;       /* reading column, kled-narrow */
  --wrap-wide:1180px; /* nav, app shell */
  --gutter:20px;

  /* radii: by size of the thing, not one value for all */
  --r-tag:3px; --r-ctl:7px; --r-card:10px; --r-zone:14px;

  /* shadows: only things that float (a frame, a dialog) get one */
  --sh-frame:0 30px 70px -40px rgba(11,11,12,.42);
  --sh-pop:0 24px 60px -30px rgba(11,11,12,.3),0 0 0 1px var(--line);
  --ring:inset 0 0 0 1px var(--line);

  /* motion */
  --d-fast:.25s; --d-mid:.6s; --d-slow:1.2s;
  --ease:cubic-bezier(.22,.8,.18,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* layered parallax speeds (multiplied by scroll offset; 0 = page speed) */
  --k-far:.62; --k-back:.18; --k-mid:.34; --k-front:.46;
  --k-mobile:.55; /* every layer is scaled by this under 821px */

  /* texture */
  --grain-opacity:.035;
  --dot-step:7px; --dot-step-m:6px; /* dot-field cell size desktop / phone */
  --dot-fps:24;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--text);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain over everything, never intercepts input */
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* shared components */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 16px;border-radius:var(--r-ctl);font:500 13.5px/1 var(--text);white-space:nowrap;transition:background var(--d-fast),box-shadow var(--d-fast),opacity var(--d-fast)}
.btn-ink{background:var(--btn);color:var(--on-btn)}
.btn-ink:hover{background:var(--btn-h)}
.btn-soft{background:var(--wash);color:var(--ink);box-shadow:var(--ring)}
.btn-soft:hover{background:var(--wash-2)}
.btn-lg{height:40px;padding:0 18px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.label{display:inline-block;font:400 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:7px;border-top:1px solid var(--line-2);min-width:22px}
.sh{display:flex;flex-direction:column;align-items:flex-start}
.sh h2{display:flex;align-items:center;gap:10px;margin-top:6px;font:600 var(--fs-h2)/var(--lh-head) var(--display);letter-spacing:-.015em}
.chip{display:inline-grid;place-items:center;width:18px;height:13px;border:1px solid var(--ink-2);border-radius:3.5px}
.chip svg{width:9px;height:9px}
.tag{display:inline-block;font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:var(--r-tag);background:var(--wash);color:var(--ink-2)}
.logo{display:flex;align-items:center;gap:9px;font:600 19px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.logo .mk{width:36px;height:auto;display:block}
.field{width:100%;height:40px;padding:0 12px;border-radius:var(--r-ctl);background:var(--paper-up);box-shadow:var(--ring);border:0;font-size:14px;transition:box-shadow var(--d-fast)}
.field:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.field::placeholder{color:var(--faint)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}

/* missing media never shows a broken frame */
video,.rframe,.card,.stack .f,.stack img{background-color:#E8E8E4}