/* Shared design tokens for every page on the site. Change a value here and every build follows.
   Each build sets only its own accent (--accent and friends) in its page. */
:root{
  --paper:#F1F2EE; --paper-2:#E6E8E2; --card:#FFFFFF; --ink:#17202E; --ink-2:#333C49; --muted:#4E5866;
  --rule:#D5D9D3; --rule-2:#C9CEC6; --focus:#2346D8;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11161F; --paper-2:#1A212C; --card:#18202B; --ink:#EEF0EC; --ink-2:#CDD3DA; --muted:#9AA4B1;
    --rule:#2A3340; --rule-2:#364150; --focus:#7C9BFF;
  }
}
:root[data-theme="dark"]{
  --paper:#11161F; --paper-2:#1A212C; --card:#18202B; --ink:#EEF0EC; --ink-2:#CDD3DA; --muted:#9AA4B1;
  --rule:#2A3340; --rule-2:#364150; --focus:#7C9BFF;
}
/* Hero particle layer (shared/hero-particles.js) */
.hero{position:relative;isolation:isolate}
.hero > *:not(.hero-fx){position:relative;z-index:1}
.hero-fx{position:absolute;inset:-40px calc(50% - 50vw) 0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  /* Keep the text column clean: particles live on the right and fade out toward the copy and the fold. */
  -webkit-mask-image:linear-gradient(to right,transparent 36%,#000 64%),linear-gradient(to bottom,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 36%,#000 64%),linear-gradient(to bottom,#000 55%,transparent 100%);mask-composite:intersect}
@media (max-width: 900px){
  .hero-fx{inset:-24px calc(50% - 50vw) auto;height:300px;
    -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 100%);mask-image:linear-gradient(to bottom,#000 20%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-fx.on{opacity:.55 !important}
}
.hero-fx.on{opacity:.9}
.hero-fx canvas{display:block;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){ .hero-fx{transition:none} }

/* An element the particles assemble behind, then fade in over. */
.fx-wait{opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.22,1)}
.fx-wait.fx-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .fx-wait{opacity:1;transform:none;transition:none} }