:root {

  --ink  : #042839;
  
  --ink-deep: #04131C;
  --paper: #F9F8F5;
  --white: #FFFFFF;
  --mist : #E0ECE8;
  
  --warm : #EDE9E5;
  --slate: #364349;
  
  --muted: #646D71;
  --sky  : #86E1FA;

  --rule-hair    : rgba(4,40,57,.10);
  
  --rule-25      : rgba(4,40,57,.25);
  --rule-d25     : rgba(249,248,245,.25);
  --rule         : rgba(4,40,57,.16);
  --rule-hover   : #042839;
  --rule-ink     : #042839;

  --rule-hair-rev: rgba(249,248,245,.14);
  --rule-rev     : rgba(249,248,245,.22);
  --rule-hover-rev: var(--paper);

  --glyph    : #042839;
  --glyph-rev: rgba(249,248,245,.55);
  --dot      : rgba(4,40,57,.22);

  --hatch-page  : 24px;
  --hatch-2     : rgba(4,40,57,.15);   
  --hatch-3     : var(--dot);          
  --hatch-2-rev : rgba(249,248,245,.15);
  --hatch-3-rev : var(--rule-rev);

  --f-disp      : "Tiempos Text", Georgia, "Times New Roman", serif;
  --f-text      : "NHG Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --s-display-xl: 80px;
  --t-display-xl: 0em;
  --l-display-xl: 0.90;
  --s-display   : 48px;
  --t-display   : 0em;
  --l-display   : 1.00;
  --s-headline  : 40px;
  --t-headline  : -0.010em;
  --l-headline  : 1.08;
  --s-title     : 24px;
  --t-title     : -0.020em;
  --l-title     : 1.20;
  --s-sub       : 20px;
  --t-sub       : -0.025em;
  --l-sub       : 1.25;
  --s-quote     : 20px;
  --t-quote     : -0.020em;
  --l-quote     : 1.35;
  --s-body-l    : 16px;
  --t-body-l    : 0em;
  --l-body-l    : 1.50;
  --s-body      : 14px;
  --t-body      : 0em;
  --l-body      : 1.71;
  --s-body-s    : 13px;
  --t-body-s    : 0em;
  --l-body-s    : 1.54;
  --s-label     : 13px;
  --t-label     : 0.077em;
  --l-label     : 1.50;
  --s-micro     : 12px;
  --t-micro     : 0em;
  --l-micro     : 1.50;

  --s-schem     : 11px;
  --t-schem     : 1.3px;   
  --s-schem-s   : 10px;
  --t-schem-s   : 1.1px;   

  --fig-full    : 1140px;  
  --fig-half    :  500px;  
  --fig-media   :  528px;  

  --sp-4        :   4px;
  --sp-8        :   8px;
  --sp-12       :  12px;
  --sp-16       :  16px;
  --sp-24       :  24px;
  --sp-32       :  32px;
  --sp-48       :  48px;
  --sp-64       :  64px;
  --sp-96       :  96px;
  --sp-128      : 128px;
  --sp-160      : 160px;

  --gap-head    : var(--sp-32);

  --bp-sm    :  640px;   
  --bp-md    :  900px;   
  --bp-lg    : 1280px;   

  --page-max : 1440px;
  --page-pad : clamp(24px, 5vw, 80px);
  --gutter      : var(--sp-64);
  --gutter-tight: var(--sp-48);

  --r-card      : 4px;
  --r-chip      : 4px;
  --r-btn       : 4px;
  
  --r-soft      : 6px;
  --shadow-float: 0 1px 2px rgba(4,40,57,.05), 0 12px 32px rgba(4,40,57,.10);
  --blur-overlay: 18px;
  --blur-menu   : 28px;
  --scrim       : rgba(4,40,57,.42);

  --grain      : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.55' intercept='-0.28'/%3E%3CfeFuncG type='linear' slope='1.55' intercept='-0.28'/%3E%3CfeFuncB type='linear' slope='1.55' intercept='-0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-alpha: 0.30;

  --t-draw     : 600ms;
  --t-char     : 16ms;
  --t-char-fade: 150ms;
  --t-fade     : 240ms;
  --t-step     : 90ms;

  --t-ui        : 160ms;
  --draw       : 900ms;
  --ease-draw  : cubic-bezier(.25,.1,0,1);
  
  --ease-enter : cubic-bezier(.22,1,.36,1);

  --ld-k       : 1;

  --pl-k       : 1;
  --pl-px      : -6vw;
  --pl-py      : 106vh;
  --pl-side    : 260vmax;
  --pl-swing   : 96deg;
  --pl-wipe    : 1450ms;      
  --pl-roll    : 500ms;       
  --pl-sq      : 15px;
  --pl-gap     : 3px;

  --rev-ground: var(--paper);
  --rev-tint  : var(--ink);
  --rev-hair  : var(--rule-hair);
  --rev-rule  : var(--rule);
  --rev-edge  : var(--rule-hair);
  --rev-hover : var(--rule-hover);
  --rev-fg    : var(--ink);
  --rev-fg-2  : var(--slate);
  --rev-fg-3  : var(--muted);
}

@media print {
  :root {
    --rule-hair     : rgba(4,40,57,.45);
    --rule          : var(--rule-ink);
    --rule-hover    : var(--rule-ink);
    --rule-hair-rev : rgba(249,248,245,.45);
    --rule-rev      : var(--paper);
  }
}

.dark-region {
  --rev-ground: var(--ink);
  --rev-tint  : var(--paper);
  --rev-hair  : rgba(249,248,245,.08);
  --rev-rule  : rgba(249,248,245,.15);
  --rev-edge  : rgba(249,248,245,.10);
  --rev-hover : rgba(249,248,245,.55);
  --rev-fg    : var(--paper);
  --rev-fg-2  : rgba(249,248,245,.72);
  --rev-fg-3  : rgba(249,248,245,.50);

  --rule-hair-rev : var(--rev-hair);
  --rule-rev      : var(--rev-rule);
  --rule-hover-rev: var(--rev-hover);
}