/* Stitch — public site design system. Brand tokens per CLAUDE.md + docs/film_module_concepts.html. */
:root{
  --teal:#13A895; --orange:#FF8106; --pink:#F4406F; --charcoal:#3D3631;
  --ink:#0a0a0a; --ink-2:#2a2a2a; --ink-3:#6b7280; --ink-4:#9ca3af;
  --rule:#e8e8e8; --rule-soft:#f1f1f1; --surface:#ffffff; --surface-2:#fafafa;
  --maxw:720px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  font-size:15px; color:var(--ink); background:#fff; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* header */
.site-header{ display:flex; align-items:center; gap:11px; max-width:var(--maxw); margin:0 auto; padding:26px 24px; }
.site-header .mark{ width:30px; height:30px; flex:0 0 30px; }
.site-header .wordmark{ font-family:'Crimson Pro', Georgia, serif; font-size:26px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.site-header .wordmark:hover{ text-decoration:none; }

/* landing — reproduced from stitch_search: top-left .brand-wordmark lockup (no tagline), centered 5×10 matrix
   object, bottom-right .brand-logo seal, and the platform description as a justified column in the search-bar slot. */
.brand-wordmark{ position:fixed; top:24px; left:32px; z-index:11; display:flex; align-items:center; gap:4px;
  font-family:'Crimson Pro', Georgia, serif; font-size:46px; font-weight:500; color:#3D3631; letter-spacing:-.005em;
  line-height:1; text-decoration:none; }
.brand-wordmark:hover{ color:#5C5550; text-decoration:none; }
.brand-wordmark-mark{ height:1em; width:1em; flex:0 0 auto; display:block; line-height:0; }
.brand-wordmark-text{ display:block; line-height:1; }
.brand-logo{ position:fixed; bottom:40px; right:32px; width:32px; height:32px; z-index:11; display:block; cursor:pointer; }
.brand-logo:hover{ opacity:0.78; }
/* manifesto overlay — copied verbatim from stitch_search.html (click the seal to reveal; click / Escape to dismiss) */
.manifesto{ position:fixed; inset:0; background:#ffffff; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:clamp(16px, 3vw, 48px); opacity:0; pointer-events:none;
  transition:opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1); cursor:pointer; }
.manifesto.is-revealed{ opacity:1; pointer-events:auto; }
.manifesto-text{ font-family:"Crimson Pro", Georgia, serif; font-style:italic; font-weight:300;
  font-size:clamp(17px, 3.6vw, 34px); line-height:1.4; letter-spacing:0.005em; color:#0a0a0a;
  white-space:nowrap; text-align:center; margin:0; opacity:0; transform:translateY(10px);
  transition:opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1) 250ms, transform 1600ms cubic-bezier(0.22, 1, 0.36, 1) 250ms; }
.manifesto.is-revealed .manifesto-text{ opacity:1; transform:translateY(0); }
/* full-height layout (landing only — legal pages keep their own body): matrix + tagline centered as the sole
   middle content, contact/legal pinned to the bottom edge. */
body.landing-page{ min-height:100vh; display:flex; flex-direction:column; }
.landing{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:100%; max-width:1084px; margin:0 auto; padding:120px 24px 40px; }
.landing-matrix{ width:100%; max-width:1036px; margin:0 auto; }   /* 75% larger than the prior ~592px matrix */
.landing-matrix svg{ display:block; width:100%; height:auto; }
/* living-matrix cells — scaleX flip about each circle's OWN centre (fill-box), 110ms ease-in per the prototype */
.landing-matrix .cell{ transition:transform 110ms ease-in; transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: reduce){ .landing-matrix .cell{ transition:none; } }
/* app search bar (stitch_search .search-shell) — the line is a DISPLAY-ONLY typing marquee (typing behaviour
   ported from docs_proto_typing_searchbar.html); appearance uses the landing tokens (24px, --ink-3). Arrows live. */
.landing-search{ width:100%; max-width:1036px; margin:56px auto 0; }
.search-shell{ display:flex; align-items:center; gap:12px; background:transparent; border:none;
  border-bottom:1px solid var(--ink-5, #c4c7cc); border-radius:0; padding:14px 4px; margin:0 0.8%; box-shadow:none; }
.search-typed{ flex:1; min-width:0; font:inherit; font-size:24px; color:var(--ink-3); line-height:1.3;
  min-height:1.3em; display:flex; align-items:center; white-space:nowrap; overflow:hidden; }
.search-caret{ display:inline-block; width:2px; height:1.15em; background:var(--ink-3); margin-left:2px;
  flex:0 0 auto; animation:search-blink 1.06s steps(1) infinite; }
@keyframes search-blink{ 50%{ opacity:0; } }
.search-submit, .search-clear{ width:36px; height:36px; padding:0; border:none; border-radius:50%;
  background:#3D3631; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  cursor:pointer; transition:background .12s, transform .08s; }
.search-submit svg, .search-clear svg{ width:16px; height:16px; display:block; }
.search-submit:hover, .search-clear:hover{ background:#5C5550; }
.search-submit:active, .search-clear:active{ transform:scale(.94); }
@media (prefers-reduced-motion: reduce){ .search-caret{ animation:none; } }
/* bottom edge — centered but right-padded so it never collides with the bottom-right seal at narrow widths */
.landing-foot{ flex:0 0 auto; text-align:center; padding:0 76px 26px 24px; }
.landing-contact{ font-size:13px; color:var(--ink-3); }
.landing-contact a{ color:var(--ink-3); }
/* top-centre status line — sits at the top middle of the page with a little presence */
.landing-status{ position:fixed; top:27px; left:50%; transform:translateX(-50%); z-index:11; white-space:nowrap;
  font-family:'DM Sans', system-ui, sans-serif; font-size:14px; font-weight:500; color:var(--charcoal);
  letter-spacing:0.01em; }
.landing-footer{ margin-top:6px; text-align:center; font-size:13px; }
.landing-footer a{ color:var(--ink-4); }
.landing-footer a:hover{ color:var(--ink-3); }
.landing-footer .landing-foot-sep{ color:var(--ink-5); margin:0 9px; }

/* legal pages */
.legal{ max-width:var(--maxw); margin:0 auto; padding:20px 24px 40px; }
.legal h1{ font-family:'Crimson Pro', serif; font-size:38px; font-weight:600; letter-spacing:-0.01em; margin:0 0 6px; }
.legal .updated{ color:var(--ink-4); font-size:13px; margin:0 0 34px; }
.legal h2{ font-size:19px; font-weight:600; margin:38px 0 10px; letter-spacing:-0.01em; }
.legal h3{ font-size:15px; font-weight:600; margin:22px 0 6px; }
.legal p, .legal li{ font-size:15px; color:var(--ink-2); }
.legal ul{ padding-left:20px; margin:8px 0; }
.legal li{ margin:6px 0; }
.legal a{ overflow-wrap:anywhere; }
.yt-block{ border:1px solid var(--rule); border-left:3px solid var(--teal); border-radius:8px; background:var(--surface-2); padding:18px 22px; margin:22px 0; }
.yt-block ul{ margin-bottom:0; }

/* footer */
.site-footer{ border-top:1px solid var(--rule); margin-top:56px; }
.site-footer .inner{ max-width:var(--maxw); margin:0 auto; padding:26px 24px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-4); }
.site-footer nav a{ color:var(--ink-3); margin-left:18px; }
.footer-dots{ display:inline-flex; gap:4px; vertical-align:middle; margin-right:8px; }
.footer-dots span{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.footer-dots .t{ background:var(--teal); } .footer-dots .o{ background:var(--orange); }
.footer-dots .c{ background:var(--charcoal); } .footer-dots .p{ background:var(--pink); }

@media (max-width:560px){
  .brand-wordmark{ font-size:34px; top:18px; left:20px; }
  .brand-logo{ bottom:24px; right:20px; }
  .landing-status{ top:60px; font-size:12px; }   /* drop below the wordmark so they don't collide at narrow widths */
  .landing{ padding:130px 22px 92px; }
  .site-footer .inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .site-footer nav a{ margin-left:0; margin-right:18px; }
}