/* REVL ARTIFACT SHELL: studio page round 2, shared base on a TRUE BLACK ground (Macca, 2 Oct; exempt from the guard as an exploration, see REVL-DESIGN.md section 13). Tokens copied from
   assets/revl-real/artifact-shell.html (generated from REVL-DESIGN.md). Every concept loads this
   first and adds its own stylesheet on top. Do not add hexes here: the four primaries only, and
   working tones as rgba() of them. */

@font-face{font-family:'Neue Haas Grotesk Display Pro';src:url('fonts/nhg-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk Display Pro';src:url('fonts/nhg-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk Display Pro';src:url('fonts/nhg-roman.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Futura PT';src:url('fonts/futura-book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Futura PT';src:url('fonts/futura-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PP Fraktion Mono';src:url('fonts/fraktion-mono-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PP Fraktion Mono';src:url('fonts/fraktion-mono.woff2') format('woff2');font-weight:700;font-display:swap} /* the file named fraktion-mono is the Bold cut (name table), as the live site's mono */

:root{
  --disp:'Neue Haas Grotesk Display Pro','NHaasGroteskDSPro-75Bd','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fut:'Futura PT','Futura','Futura-Medium',Avenir,'Century Gothic',sans-serif;
  --fmono:'PP Fraktion Mono','Fraktion Mono',Menlo,'Courier New',monospace;

  --midblack:#1A1F1F; --grey:#D4D4D3; --beige:#CCCBBC; --white:#FFFFFF;
  --ground:#000000; /* the page ground: true black */

  --black:var(--midblack);
  --panel:rgba(212,212,211,.06); --panel2:rgba(212,212,211,.11);
  --off:var(--grey); --warm:var(--beige);
  --dim:rgba(212,212,211,.55);
  --line:rgba(212,212,211,.28); --line2:rgba(212,212,211,.14);

  /* ink tones, for the rare small light element (a White button label) */
  --ink:var(--midblack);
  --ink-dim:rgba(26,31,31,.62);
  --ink-line:rgba(26,31,31,.22);
  --ink-panel:rgba(26,31,31,.06);

  /* scrims are black here, to match the true black ground */
  --scrim-top:rgba(0,0,0,.55);
  --scrim-mid:rgba(0,0,0,.25);
  --scrim-bot:rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--grey);font-family:var(--fut);font-size:17px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}

/* form controls: flat, no native chrome, autofill keeps the field's ground */
input,select,textarea{font:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}
select::-ms-expand{display:none}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px var(--ground) inset;
  transition:background-color 99999s ease-in-out 0s;
}
[hidden]{display:none!important}

.mono{font-family:var(--fmono);text-transform:uppercase;letter-spacing:-.02em;line-height:1.1}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1.05;letter-spacing:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}