/* kit-base.css: tokens and the motion contract every part of the Studio comp shares.
   Two worlds meet on this page: the site (warm paper, Playfair, copper, forest) and the
   product (Foxora Studio's own light theme, Inter, taupe). Site tokens are --p-*;
   Studio tokens are --s-*. Nothing defines its own colours outside these. */
@font-face{font-family:Playfair;src:url(/fonts/playfair-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Playfair;src:url(/fonts/playfair-italic400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/jetbrainsmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/jetbrainsmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:PlexLight;src:url(/fonts/plexsans-300.woff2) format("woff2");font-weight:300;font-display:swap}
:root{
  /* the site */
  --p-paper:#f6f3eb;--p-white:#fffcf6;--p-ink:#232923;--p-sub:#5d6157;--p-faint:#5f6255;--p-line:#d8d8cb;
  --p-copper:#b8532b;--p-copper-ink:#93411f;--p-forest:#203a31;--p-forest-hover:#142a22;--p-mint:#dbe6d9;
  --p-sage:#e4eadd;--p-apricot:#efdfcf;--p-cream:#f7f0e3;--p-sand:#eee0d0;--p-gold:#d5bb7c;
  --p-serif:Playfair,Georgia,serif;--p-sans:Geist,system-ui,sans-serif;--p-mono:Mono,ui-monospace,monospace;
  --p-shadow:0 30px 80px -46px rgba(32,58,49,.42),0 2px 6px -2px rgba(32,58,49,.08);
  --p-ease:cubic-bezier(.22,1,.36,1);
  /* the product: Foxora Studio's light theme (taupe scheme) */
  --s-bg:#faf8f4;--s-side:#efe9e1;--s-canvas:#f3eee7;--s-elev:#f1ede7;--s-elev-2:#ebe6df;--s-elev-3:#e4ddd4;
  --s-t1:#1c1a18;--s-t2:#5b5349;--s-t3:#6a6155;--s-line:rgba(68,62,55,.13);--s-line-2:rgba(68,62,55,.21);--s-line-3:rgba(68,62,55,.33);
  --s-primary:#1c1a18;--s-on-primary:#faf8f4;--s-success:#286633;--s-warning:#7d5008;--s-info:#2d6fb5;--s-danger:#c0392b;
  --s-sans:Inter,system-ui,sans-serif;--s-mono:Mono,ui-monospace,monospace;
  --s-r-sm:6px;--s-r:8px;--s-r-lg:10px;--s-r-card:12px;--s-r-bubble:20px;
  --s-shadow-pop:0 1px 2px rgba(28,25,20,.06),0 12px 32px rgba(28,25,20,.14);
}
/* the motion contract (see kit.js). Default markup is the finished state. */
.js-motion [data-reveal]:not(.on){opacity:0}
.js-motion [data-scene]:not(.is-done) [data-fx]:not(.on){opacity:0;transform:translateY(6px)}
[data-scene] [data-fx]{transition:opacity .45s var(--p-ease),transform .45s var(--p-ease)}
/* a running label shimmers; the braille throbber is the only loader */
@keyframes fx-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
.fx-shimmer[data-state="running"]{background:linear-gradient(90deg,var(--s-t2) 0%,var(--s-t2) 40%,var(--s-t1) 50%,var(--s-t2) 60%,var(--s-t2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 1.6s linear infinite}
.is-typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:fx-caret 1s steps(1) infinite}
@keyframes fx-caret{50%{opacity:0}}
html[data-motion="paused"] *,html[data-motion="reduced"] *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
