/* Neeah Design — the shared visual base.
   Tokens, paper + grain, the blend that lets the clips sit on the page, the drawn-chrome
   hooks, and the scroll-linked motion classes. Each page keeps its own layout inline. */

:root{
  --ink:#111110;
  --mute:#6b6b66;
  --paper:#f8f6f0;
  --gold:#e0a92e;
  --faint:#9a9a95;
  --line:#dcdcd4;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);overflow-x:hidden}

/* Paper grain. Fixed, above everything, never interactive. */
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.55;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}

/* The clips carry a (253,253,253) background, not pure white. `darken` keeps the darker
   of the two layers, so against a paper darker than 253 in every channel the clip
   background resolves exactly to the page. Wrappers are painted too: transform and
   z-index make each its own stacking context, where the video would otherwise blend
   against transparency and show as a pale rectangle. */
video{mix-blend-mode:darken;display:block;width:100%}
.art,.artwrap{background:var(--paper);position:relative}

/* Drawn chrome hooks — chrome.js fills these in with rough.js */
.rule{display:block;height:15px;overflow:visible;margin-bottom:1.3rem}
.drawbox{position:relative;display:inline-block;padding:11px 15px}
.drawbox > svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.drawbox > .btn,.drawbox > .copybtn{
  position:relative;background:none;border:0;color:var(--ink);
  padding:.3rem .25rem;font:700 .88rem/1 Karla,sans-serif;text-decoration:none;
  letter-spacing:.01em;cursor:pointer;box-shadow:none}
.dark .drawbox > .btn{color:var(--paper)}
.drawn-card{position:relative;background:var(--paper)}
.drawn-card > svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Outlined scene numerals */
.num{font-family:Newsreader,Georgia,serif;font-size:9rem;line-height:.78;color:transparent;
 -webkit-text-stroke:1.1px var(--line);pointer-events:none;user-select:none;margin-bottom:-.3rem}

/* A marked phrase: a highlighter swipe rather than a solid block, so it can appear
   often without shouting. */
.hl{font-weight:600;color:var(--ink);background:linear-gradient(to top,
   rgba(224,169,46,.55) 42%, rgba(224,169,46,0) 42%);box-shadow:none;border-radius:0}

/* Motion: scroll-linked and varied, not one uniform fade. Unsupported browsers simply
   show the content with no entrance. */
@supports (animation-timeline: view()){
  .m-rise{animation:nh-rise linear both;animation-timeline:view();animation-range:entry 8% cover 32%}
  .m-slow{animation:nh-rise linear both;animation-timeline:view();animation-range:entry 0% cover 48%}
  .m-drift{animation:nh-drift linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  .m-slide{animation:nh-slide linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
}
@keyframes nh-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes nh-drift{from{opacity:.25;transform:translateY(80px) scale(.965)}to{opacity:1;transform:none}}
@keyframes nh-slide{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.m-rise,.m-slow,.m-drift,.m-slide{animation:none}}
@media print{body::after{display:none}}